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

Question

我有幾個文本字段，如SSN，電話號碼和電子郵件ID。 我想做像onfocus這樣的東西它應該顯示輸入框的整個內容，並且在模糊時它應該將內容掩蓋回某些東西（比如asterix）。謝謝你提前

Answer 1

您可以在兩個事件中切換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>

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" /> 。