javascript - 屏蔽和取消屏蔽 html 中的输入文本

Question

我的文本字段很少，例如 SSN 、电话号码和电子邮件 ID。我想做像 onfocus 这样的事情，它应该显示该输入框的全部内容，并且在模糊时它应该将内容掩盖回某些东西（比如 asterix）。提前致谢

Answer 1

您可以在两个事件之间切换<input>元素的类型。请参阅此示例小提琴。passwordtext

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" />如果你想简单的话，你可以简单地使用。