Mot de passe de masquage dans le champ mot de passe à l'aide de jquery

Comment faire un mot de passe de masquage comme dans Android mobile comme lorsqu'on est dans un type de clé, il montre une clé pour quelques secondes et de le modifier pour "*".
J'ai essayé le plugin mentionné dans Mot de passe de masquage comme dans les mobiles à l'aide de js il n'est pas optimale. Et le jsfiddle http://jsfiddle.net/medopal/X37Wz/ pas en mesure de gérer revenir en arrière et effacer. Pourriez-vous s'il vous plaît suggérer d'autres méthodes pour ce faire? Uniquement à l'aide de jquery et de ne pas utiliser de plugins.

Quelle est la raison de l'avoir sur la non-plate-forme mobile?
Il est une application basée sur mobile.
si il sera utilisé sur le bureau - il n'y a pas de raison de tels comportements. Si il sera utilisé sur plateforme mobile, il sera masqué automatiquement.
Il n'est pas fait automatiquement, nous avons besoin de le manipuler à l'aide de jQuery.
c'est fait automatiquement par les navigateurs mobiles. Juste utilisez l'entrée password

OriginalL'auteur Rajeswari | 2012-08-06

ici, j'ai fait la solution complète bin pour la requête ci-dessus. veuillez vérifier le lien de démonstration comme indiqué ci-dessous:

Démo: 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));
}
}

Démo: http://codebins.com/bin/4ldqp8u

Merci. Mais comment gérer si on supprime un caractère à partir de txtpwd? Comme de maintenant, il n'est pas supprimé dans le champ caché.
Salut, avez-vous visité ci-dessus le lien de démonstration..? Il travaille très bien que votre requête.
Si vous tapez "123" dans txtpwd l'élément d'entrée et Maintenant, Comme par votre requête, j'ai mis événement keypress sur txtpwd donc, si votre curseur sur txtpwd après la première étoile "* | * * " et vous appuyez sur la touche Suppr, puis il enlève le "2" de l'élément masqué valeur "13".
Même que pour le retour arrière Maintenant, il vous appuyez sur la touche retour arrière "|", puis il enlève le "1" de l'élément masqué valeur.
Ici, j'ai mis sur les contrôles que si le curseur dans txtpwd avant le premier char comme "|***" et appuyez sur la touche de retour arrière de même que si le curseur après le dernier caractère comme "***|" et appuyez sur la touche Suppr puis, il ne fait rien.

OriginalL'auteur gaurang171

basé sur keyur à codebins.com le code ci-dessus, cette grande petite réponse ici https://stackoverflow.com/a/4843500/1056285 et aussi https://stackoverflow.com/a/1431109/1056285 (backspace efface sans bugs), j'ai adapté la solution de prendre en compte le retour arrière trop!

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

Vous pouvez avoir un coup d'oeil ci-dessous:
http://codebins.com/bin/4ldqp8u/38

Alors que ce lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements.
je ne comprend pas le code car j'ai eu quelques problèmes avec le code de mise en forme et j'ai été trop paresseux pour voir quel est le problème. Mais j'ai pensé, et maintenant je ajouter le code aussi. Merci pour la suggestion 🙂
Ce presque travaillé, mais ne fonctionne pas correctement lorsque vous sélectionnez l'ensemble du champ et appuyez sur supprimer. J'ai trouvé ce script, qui a mieux fonctionné: sitepoint.com/better-passwords-1-the-masked-password-field.

OriginalL'auteur Andrei Sandulescu

IE 10 a de la fonctionnalité. Peut-être certains on peut l'arracher? 😐

Mot de passe de masquage dans le champ mot de passe à l'aide de jquery

Aussi, j'ai écrit un extrait de simple sur la base de cette ici qui devrait vous obtenir a commencé sur le codage de votre propre.

EDIT: vérifier le code ici:

<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>

OriginalL'auteur Prasanth

Vous devez vous connecter pour publier un commentaire.