在html中屏蔽和取消屏蔽输入文本

Question

我有几个文字字段，如SSN，电话号码和电子邮件ID。我想做像onfocus这样的东西，它应该显示输入框的整个内容，并且在模糊时它应该将内容掩盖回某些东西（比如asterix）。谢谢提前

Answer 1

您可以在两个事件中在<input>和password之间切换text元素的类型。请参阅此example fiddle。

HTML

<input type="password" id="target" />

JS

<script>
var inp = document.querySelector( '#target' );

inp.addEventListener( 'focus', function(){
    inp.type = 'text';
});
inp.addEventListener( 'blur', function(){
    inp.type = 'password';
});
</script>

Answer 2

试试这样：

<input type="text" id="emailId" name="emailId" />

然后，做一个：

var emailIdValue = "";

$( document ).ready( function() {

     emailIdValue = $( '#emailId' ).val();   

     $( '#emailId' ).val( "********" );

     $( '#emailId' ).focus( function() {

          $( this ).val( emailIdValue );

     } ).focusout( function() {

          emailIdValue = $( this ).val();
          $( this ).val( '********' );

     } );

} );

Answer 3

如果你想简单的话，你可以简单地使用<input type="password" />。