Het probleem
Ik probeer het HTML-attribuut auto-complete="off" in te stellen op een invoerelement met de klasse slds-input. Om de een of andere reden converteert de sjabloon dit altijd naar autocomplete="true" bij het renderen.
Ik heb een aangepast zoekveld gemaakt om naar sObjects te zoeken, en dus is het gedrag van de browser automatisch aanvullen uiteraard niet nuttig, en als dit gewone html was, zou ik gewoon het autocomplete attribuut kunnen toevoegen met de waarde off, maar aura lijkt niet te laat me.
Een antwoord dat ik vond, stelde voor om html-autocomplete="off" te gebruiken, dus ik heb dat ook geprobeerd, en als ik dat doe, wordt het attribuut gewoon helemaal niet weergegeven.
Wat ik heb geprobeerd
- Ik heb geprobeerd om
autocomplete="off"enhtml-autocomplete="off"in de invoertag - Ik heb geprobeerd
autocomplette="off"enhtml-autocomplete="off"op te nemen in de formulier-tag rond de invoertag - Ik heb geprobeerd de
aria-autocomplete-waarde aan te passen (dat deed niets, niet dat ik het echt verwachtte, maar ik wilde het in ieder geval proberen). - In deze pdf van de aura-documenten het html-attribuut
autocompletewordt niet genoemd. - Ik “heb een lijst gevonden met ondersteunde HTML-tags in aura , maar geen lijst met ondersteunde attributen
- Ik kan” niets over dit gedrag vinden in de lightning-documenten, en het is erg moeilijk naar google vanwege het automatisch aanvullen bliksem / aura-element
Is er een manier om dit te doen? Of documentatie over dit gedrag?
Codevoorbeeld:
Dit:
<aura:component> <input type="text" autocomplete="off" /> </aura:component> komt uit in de finale HTML als deze:
<input type="text" autocomplete="true" data-aura-rendered-by="5:0"> Reacties
- Wat ' s u ervan weerhouden om gewone html-invoer te gebruiken? Kun je wat code toevoegen aan de opmaak om te helpen reproduceren.
- Wat ' me tegenhoudt, is de manier waarop aura (of misschien bliksem) de code aanpast. Meer code toegevoegd
- Ik gebruik autocomplete = " wachtwoord " in plaats van uit / aan, aangezien Chrome dit respecteert. Anders negeert Chrome automatisch aanvullen. Probeer het eens en kijk of het voor jou werkt.
Antwoord
Mogelijk vanaf lente 19. Zie hier
automatisch aanvullen – Regelt het automatisch aanvullen van het veld. Dit kenmerk wordt ondersteund voor invoertypes voor e-mail, zoeken, tel, tekst en url. De waarden aan en uit worden ondersteund, maar het gedrag van automatisch aanvullen is afhankelijk van de browser. Wanneer u het autocomplete-attribuut instelt, geeft de lightning: input-component de waarde door zodat deze door de browser kan worden geïnterpreteerd.
Answer
Ik heb zojuist met ondersteuning bij Salesforce gesproken en blijkbaar is dit momenteel onmogelijk.
(Ik laat mijn antwoord hier niet als het geaccepteerde antwoord achter omdat ik wil dat iemand deze vraag vindt als er een betere optie is en deze beantwoordt en ik markeer ze als geaccepteerd.)
Tijdelijke oplossing:
Ik gebruik de volgende hack-oplossing:
Ik heb mijn element een id gegeven en deze JS uitgevoerd:
turnOffAutocomplete : function(component) { var input = document.getElementById("id-of-the-input"); if(input.getAttribute("autocomplete") !== "off"){ input.setAttribute("autocomplete","off"); } } Ik voer het uit niet in init (omdat dat wordt uitgevoerd voordat de elementen zijn weergegeven) maar in plaats daarvan wanneer het invoerelement is gefocust.
Eventuele opmerkingen om dit te verbeteren (dus het doet niet “t hoeven bijvoorbeeld niet elke keer uit te voeren als de invoer gefocust is) zou op prijs worden gesteld.
Opmerkingen
- Verplaats deze logica naar de renderer.
Antwoord
De enige oplossing die ik vond was om gebruik een textArea met rijen = “1”
<textarea type="text" class="slds-input" rows="1" style="resize : none;" /> U kunt enkele slds klassen toevoegen om dezelfde weergave te hebben als een normale invoer.
Antwoord
Je kunt dit proberen werkte voor mij door de aura: id te gebruiken en vervolgens “autocomplete” uit te zetten. U kunt gebruiken in de init-methode van de verlichtingscontroller
component.find("fieldSelect").set("v.autocomplete","off");