маскировка пароля JavaScript при вводе пароля

Question

Я искал функцию JavaScript для маскировки пароля ввода вместе с указанием пароля в другом текстовом поле.

Вот код JavaScript я нашел в интернете

$(function() { 
    //Extends JQuery Methods to get current cursor postion in input text. 
    //GET CURSOR POSITION 
    jQuery.fn.getCursorPosition = function() { 
     if (this.lengh == 0) return -1; 
     return $(this).getSelectionStart(); 
    } 

    jQuery.fn.getSelectionStart = function() { 
     if (this.lengh == 0) return -1; 
     input = this[0]; 

     var pos = input.value.length; 

     if (input.createTextRange) { 
      var r = document.selection.createRange().duplicate(); 
      r.moveEnd('character', input.value.length); 
      if (r.text == '') pos = input.value.length; 
      pos = input.value.lastIndexOf(r.text); 
     } else if (typeof(input.selectionStart) != "undefined") pos = input.selectionStart; 

     return pos; 
    } 

    //Bind Key Press event with password field  
    $("#txtpwd").keypress(function(e) { 
     setTimeout(function() { 
      maskPassword(e) 
     }, 100); 
    }); 

}); 

function generateStars(n) { 
    var stars = ''; 
    for (var i = 0; i < n; i++) { 
     stars += '*'; 
    } 
    return stars; 
} 

function maskPassword(e) { 

    var text = $('#txthidden').val().trim(); 
    var stars = $('#txthidden').val().trim().length; 
    var unicode = e.keyCode ? e.keyCode : e.charCode; 
    $("#keycode").html(unicode); 

    //Get Current Cursor Position on Password Textbox 
    var curPos = $("#txtpwd").getCursorPosition(); 
    var PwdLength = $("#txtpwd").val().trim().length; 

    if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) { 
     //If NOT <Back Space> OR <DEL> Then... 
     if (unicode != 8 && unicode != 46) { 
      text = text + String.fromCharCode(unicode); 
      stars += 1; 
     } 
     //If Press <Back Space> Or <DEL> Then... 
     else if ((unicode == 8 || unicode == 46) && stars != PwdLength) { 
      stars -= 1; 
      text = text.replace(text.charAt(curPos), ""); 
     } 
     //Set New String on both input fields 
     $('#txthidden').val(text); 
     $('#txtpwd').val(generateStars(stars)); 
    } 
} 

и HTML дается как

<div id="panel"> 
    <input type="text" id="txtpwd" name="txtpwd" size="15"/> 
    <input type="text" id="txthidden" name="txthidden" size="15"/> 
    <div> 
    KeyCode Pressed: 
    <span id="keycode"> 
    </span> 
    </div> 
</div> 

теперь, когда я набираю в txtpwd поля он кроющий в знак звездочки и гравюры текстовое значение в текстовом поле txthidden. , но когда я удаляю из текстового поля txtpwd, он не удаляет текст с txthidden. и демонстрационную версию можно найти здесь http://codebins.com/bin/4ldqp8u

Пожалуйста, дайте мне знать, как я могу это исправить. Thankx в Advance

Answer 1

я искал яваскрипт функции для маскировки ввода пароля, а также показывая пароль в другом текстовом поле

В HTML5, есть по умолчанию дела input field for passwords, так что он маскируется, как вы вводите свой ввод.

<div id="panel"> 
    <input type="text" id="txtpwd" name="txtpwd" size="15"/> 
    <input type="password" id="txthidden" name="txthidden" size="15"/> 
<div> 

Answer 2

Для удаления и возврата коснитесь вместо этого. Как здесь, в модифицированной версии вашей демонстрации: http://codebins.com/bin/4ldqp8u/111

Это будет ловить ключи, которые не нажимают клавиши. Это примерно так же близко, как и будет. Это по-прежнему не будет хорошим решением, если вы пытаетесь преобразовать символы midstream (т. Е. В событие key *), потому что в любое время кто-либо выделяет фрагмент и изменяет их как группу, ваш скрытый ящик будет не соответствовать введенный ввод. Кроме того, такие вещи, как резка с Ctrl + X испортит это. Щелчок мышью и перетаскивание могут потенциально испортить его. Вклеивание в коробку испортит его. и т. д.