Маска и unmask текст ввода в html

Question

У меня есть несколько текстовых полей, таких как SSN, номер телефона и идентификатор электронной почты. Я хотел бы сделать что-то вроде onfocus, он должен отображать весь контент этого окна ввода и при размытии, он должен замаскировать контент на что-то (скажем, астерикс). Заранее спасибо

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="password" />, если хотите делайте это просто.

Answer 3

Попробуйте так:

<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('********'); 

    }); 

});