Ustaw domyślną wartość wejścia hasłem, dzięki czemu można ją odczytać

Chcę mieć pole hasło, które mówi „Hasło” w nim, zanim użytkownik wprowadzi swoje hasło (żeby wiedzieć, co pole jest)Ustaw domyślną wartość wejścia hasłem, dzięki czemu można ją odczytać

I d raczej po prostu użyj JavaScript, importowanie jQuery do tego samego wydaje się marnotrawstwem, ale nie mam pojęcia, jak to zrobić. Ilustracje wyjaśniają dość wyraźnie:

wygląda Co jak:

enter image description here

Co chcę wyglądać:

enter image description here

To tylko bardzo prosty strona internetowa i najbardziej podstawowe logowanie (nie ma walidacji itp.)

Wszelkie pomysły?

<input id="username" name="username" class="input_text" type="text" value="Username" /> 
<input id="password" name="password" class="input_text" type="password" value="Password" />

Źródło

2011-01-25 theorise

ty może ją zhakować dynamicznie zmieniając typ pola (tj. najpierw "tekst", zmieniając na "hasło" przy aktywacji). Nie jestem w 100% pewien, że to zadziała. –

Zmień swój wkład password być proste wejście typu text. Następnie, używając JavaScript (lub JQuery) na fokusie, zmień go na typ wejściowy password.

Oto mała próbka niesprawdzone zwykły JavaScript (jQuery) nie:

<html> 
<head> 
    <script type="text/javascript"> 
     function makeItPassword() 
     { 
     document.getElementById("passcontainer") 
      .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>"; 
     document.getElementById("password").focus(); 
     } 
    </script> 
</head> 
<body> 
    <form> 
     <span id="passcontainer"> 
     <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" /> 
     </span> 
    </form> 
</body> 
</html>

Źródło

2011-01-25 18:08:52

+1. Tak bym to zrobił. '$ (" # hasło "). bind (" focus ", function() {$ (this) .val (" "); $ (this) .attr (" type "," password ");});' –

Należy zauważyć, że zmiana "typu" elementów 'input' nie będzie działać poprawnie w IE. Zobacz także: http://stackoverflow.com/questions/1544317/ – CMS

@CMS: Świetny punkt. Nie wiedziałem tego! –

Proste rozwiązanie:

<input id="username" name="username" class="input_text" type="text" placeholder="Username" /> 
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Źródło

2011-01-25 19:29:44 Ms2ger

Jeśli używasz HTML5 następnie należy użyć placeholder attribute.

<input id="username" name="username" class="input_text" type="text" placeholder="Username" /> 
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Jeśli używasz HTML4 można utworzyć fake password field.

<script type="text/javascript"> 
    function pwdFocus() { 
     $('#fakepassword').hide(); 
     $('#password').show(); 
     $('#password').focus(); 
    } 

    function pwdBlur() { 
     if ($('#password').attr('value') == '') { 
      $('#password').hide(); 
      $('#fakepassword').show(); 
     } 
    } 
</script> 

<input id="username" name="username" class="input_text" type="text" v="Username" /> 
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" /> 
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />

Źródło

2011-04-26 21:30:46

-2

miałam inny pomysł, aby poradzić sobie z tym problemem i trzeba będzie nie Javascript:

<input onclick="value=''; type='password';" name="password" type="text" value="Password" />

Albo można też zrobić to w ten sposób:

<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

nie wiem różnica między tymi możliwościami. Inną rzeczą, którą możesz zmienić, jest napisanie zamiast: onclick=.......onfocus=.....

Nie znam różnicy również tutaj.

Ale mam nadzieję, że mógłbym ci pomóc. PS: Przykro mi z powodu mojego złego angielskiego jestem Niemcem.

Źródło

2013-03-28 21:01:59 Leon5637

"nie potrzebujesz JavaScript" - to jest JavaScript. – MrWhite

Dodaj następujący kod JavaScript:

function makePasswordHidden() { 
    document.getElementById("password").setAttribute("type", "password"); 
}

zmienić wejście o hasło do:

<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

Co to robi to sprawia, że element wejściowy a 'Hasło', a wartość jest aktualizowany, aby był ukryty. Jeśli chciałbyś dla value = „Hasło” być widoczny, jeśli pole jest puste, a następnie dodaj następującą funkcję javascript:

function makePasswordShown() { 
    document.getElementById("password").setAttrivute("type", "text"); 
}

i dodaj następujące do wprowadzenia hasła:

onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"

Źródło

2015-06-19 22:35:58

Ustaw domyślną wartość wejścia hasłem, dzięki czemu można ją odczytać

Odpowiedz

Powiązane problemy