маскирование пароля в поле пароля с помощью jquery

Question

Как маскировать пароль, как на Android-мобильном телефоне, например, когда мы вводим ключ, он отображает ключ в течение нескольких секунд и меняет его на «*». Я пробовал плагин, упомянутый в Password masking as in mobiles using js, он не является оптимальным. И jsfiddle http://jsfiddle.net/medopal/X37Wz/ не способен обрабатывать обратное пространство и удалять. Не могли бы вы предложить другие методы для этого? Только использование jquery и не использование плагинов.

Answer 1

здесь я сделал полный бункер для решения выше запроса. пожалуйста, проверьте демо-ссылку, как указано ниже:

Демо:http://codebins.com/bin/4ldqp8u

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> 

JQuery:

$(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) 
     }, 500); 
    }); 

}); 

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)); 
    } 

} 

Demo:http://codebins.com/bin/4ldqp8u

Answer 2

IE 10 имеет эту функцию. Может быть, кто-то может сорвать его? : |

Кроме того, я написал простой фрагмент кода, основываясь на этом here, которые должны получить вы начали кодирования самостоятельно.

EDIT: проверить код здесь:

<form action="#" onclick="return false;"> 
<input type="text" id="pv" name="passval" value="password" /><br> 
<input type="password" id="p" name="pass" value="passwordsd" /><br> 
<button id="b">Show</button> 
</form> 
<script> 
$("#b").mousedown(function(){ 
    $("#pv").val($("#p").val()); 
}).mouseup(function(){ 
    $("#pv").val(""); 
}); 
</script> 

Answer 3

на основе Keyur в codebins.com код выше, это отличный маленький ответ здесь https://stackoverflow.com/a/4843500/1056285, а также https://stackoverflow.com/a/1431109/1056285 (для изготовления забой на самом деле удалить без ошибок) я адаптировала решение принять во внимание забой тоже!

$(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) 
     }, 500); 
    }); 

    $("#txtpwd").keydown(function(e) { 
     if (e.keyCode == 8) { 
      setTimeout(function() { 
       maskPassword(e) 
      }, 1); 
     } 
    }); 

}); 

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

function maskPassword(e) { 

    var text = $('#txthidden').val(); 
    var stars = $('#txthidden').val().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().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.substr(0, curPos) + text.substr(curPos + 1); 
     } 
     //Set New String on both input fields 
     $('#txthidden').val(text); 
     $('#txtpwd').val(generateStars(stars)); 
    } 

} 

Вы можете посмотреть ниже: http://codebins.com/bin/4ldqp8u/38