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

Mask and unmask input text in html

本文关键字：屏蔽 输入 文本 html 取消      更新时间：2023-09-26

我有几个文本字段，如SSN，电话号码和电子邮件ID。我想做一些类似 onfocus 的事情，它应该显示该输入框的全部内容，并且在模糊时它应该将内容屏蔽回某些东西（比如 asterix）。提前致谢

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

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

像这样尝试：

<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( '********' );
     } );
} );
如果你想

简单，你可以简单地使用<input type="password" />。

相关文章：