Jak pozbyć się elementu zastępczego na polu hasła przejętym z etykiety

Question

Nie mogę pozbyć się niechcianego symbolu zastępczego (lub znaku wodnego) na polu tekstowym hasła. Gdy hasło tekstowe jest skupiony, Android wyświetla przeglądarka internetowa placeholder wyprzedzony z powiązanego elementu label, tak: źródło

HTML:

<form method="post"> 
    <label for="userName">Login name:</label> 
    <input id="userName" name="userName" type="text" value="" /> 

    <label for="password">Password:</label> 
    <input id="password" name="password" type="password" /> 

    <input type="submit" id="submit" name="submit" value="Log In" /> 
</form> 

Uwaga: Wyświetlane jest

• zastępczy tylko wtedy, gdy pole tekstowe ma fokus i jest puste.
• Podczas korzystania z atrybutu HTML "zastępczy" przy wprowadzaniu hasła jest wyświetlany tylko do momentu, gdy hasło zostanie skupione. Po otrzymaniu fokusa wyświetla tekst etykiety.
• Nie chcę usuwać atrybutu "dla" etykiety. Chcę, aby etykieta była klikalna, a pole tekstowe hasła, aby uzyskać koncentrację po kliknięciu etykiety.

Edit:

Próbowałem inny wariant (który unika "za" atrybutu), ale zastępczy jest nadal obecny:

<label>Password: <input id="password" name="password" type="password" /></label> 

Answer 1

myślę, że trzeba posiadacza miejsce w Androidzie. W tym celu użyj właściwości EditText

android: Hint = „Nazwa użytkownika”

<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textNoSuggestions" android:id="@+id/textName" android:hint="Username"></EditText> 
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:id="@+id/textEmail" android:hint="Email"></EditText> 

Answer 2

Co trzeba zrobić, aby temu zapobiec jest ustawienie etykietę „dla” atrybut być coś innego niż "hasło". Możesz również zmienić atrybut "nazwa" danych wejściowych na coś innego niż "hasło". Oba zdają się blokować Androidowi umieszczanie etykiety jako symbolu zastępczego.

Answer 3

Wygląda na to, że niemożliwe jest stosowanie stylów w "skoncentrowanym" polu hasła, ponieważ w rzeczywistości jest to kolejna instancja wejściowa ustawiona bezwzględnie nad oryginalnym wejściem. Tak więc są dwa pola, gdy pole hasła jest ostre.

Udało mi się usunąć ten tekst za pomocą JavaScript. Chodzi o tymczasowe usunięcie odpowiadającej <etykiety> z DOM, a następnie przywrócenie go po chwili.

Kod będzie wyglądać następująco:

var field = document.getElementById('password'); 
var label = document.querySelector('label[for="password"]'); 
field.onfocus = function() { 
    label.parentNode.removeChild(label); 
    setTimeout(function(){ 
     field.parentNode.insertBefore(label, field); 
    },1000); 
} 

Małe opóźnienie setTimeout nie działa. Myślę, że opóźnienie w tym przypadku zależy od urządzenia/systemu. Może modifing label.innerHTML lub jakieś inne sztuczki również może pomóc usunąć ten tekst;)

Answer 4

następujące css może wyłączyć to:

-webkit-user-modify: read-write-plaintext-only;