Переключить элемент метки в javascript

Question

Приветствую всех, кого я недавно спросил this question, и я отказался от «замены идеи ввода». Вместо этого я решил попробовать другой подход.

Я сделал свое поле поля поля прозрачным, и я поместил <label> элемент «сзади» ввода пароля, чтобы он оказался частью поля пароля. Теперь я написал стандартную функцию для переключения элемента, как это:

function togglePassword(obj) { 
        var el = document.getElementById(obj); 
        if (el.style.display != 'none') { 
         el.style.display = 'none'; 
        } 
        else { 
         el.style.display = ''; 
        } 
       } 

я вызвать эту функцию onforus и ONBLUR от поля ввода пароля, так что метка исчезает, когда поле пароля сфокусировано, но у меня есть проблемы с ONBLUR, потому что после того, как я печатаю пароль и нажмите «TAB», на который выводит меня на кнопку отправки в систему, затем снова появляется элемент <label> с паролем и его смешанный с введенным паролем. image http://i49.tinypic.com/23s7ypc.png Вот образ этого, поэтому я попытался придумать что-то новое.

function togglePassword(obj) { 
       var el = document.getElementById(obj); 
         var input_el = document.getElementById('password_field'); 
        if(input_el.value.length > 0) 
          { 
           el.style.display = 'none'; 
          } 
          else { 
           if (el.style.display != 'none') { 
         el.style.display = 'none'; 
         } 
         else { 
          el.style.display = ''; 
         } 
        } 
           } 

К сожалению, этот код не работает. Может кто-нибудь указать мне, где я совершил ошибку? Таким образом, этот второй код должен проверить, является ли поле пароля emtpy или нет, если оно не пусто, а затем продолжайте работу с Google, если он не переключает, просто скройте значение пароля. Помощь: D спасибо

Answer 1

Попробуйте это будет работать

function togglePassword(obj) { 
var el = document.getElementById(obj); 
var input_el = document.getElementById('password_field'); 
if((input_el.style.display == ‘none’) || ((input_el.style.display=='') && (input_el.offsetWidth==0))){ 
el.style.display = 'block'; 
} else { 
el.style.display = ‘none’; 
} 
} 
           } 

Answer 2

HI,

попробовать использовать библиотеку как JQuery. они действительно полезны в таких простых задачах, а также могут обрабатывать довольно сложные ...

Важная информация: такая вещь, как укрытие/показ, разрешено уже сто раз. не изобретать колесо ;-)

Answer 3

в один прекрасный день я буду обходить стороной, чтобы писать на детали этой техники, но рабочая реализация сидела в моем каталоге TMP в течение последних шести месяцев: http://dorward.me.uk/tmp/label-work/example.html

Answer 4

Я не совсем понимаю, требование, но вы должны проверить в вашей функции, если вы делаете размытость на FOCU действия и реагировать на это.

Может быть что-то вроде этого:

<script type="text/javascript"> 
function togglePassword(alwaysVisible, labelId, pwdId){ 
var label=document.getElementById(labelId); 
if (alwaysVisible){ 
    label.style.display=""; 
} else { 
    var pwd=document.getElementById(pwdId); 
    label.style.display= (pwd.value.length==0)?"":"none"; 
} 
} 
</script> 

....

<form> 
<label for="pwd" id="labelPwd">Type your password&nbsp;:&nbsp;</label> 
<input name="pwd" id="pwd" onfocus="togglePassword(true, 'labelPwd', 'pwd')" onblur="togglePassword(false , 'labelPwd', 'pwd')" type="password"> 

<input type="submit">                
</form>