Question

我需要制作一个表单，其中未选中时会屏蔽信用卡字段。因此，用户会输入他们的信用卡信息（数字可见），但当他们点击不同的输入字段时，信用卡号码将变成这样的内容 - ＆＃39; *********** *＆＃39 ;. 如果他们要点击CC字段，数字将重新出现。不知道怎么做这个......？

我现在只有基本的表单CSS，没什么特别的

<form><label>*Credit Card Number</label><input required type="text" name="AccountNumber" id="AccountNumber" value="" maxlength="19"/></form>

Answer 1

这看起来像是一种hacky方式，但它绝对是最简单和最快的

document.querySelector('input').addEventListener('blur', function(){this.type = "password"})

document.querySelector('input').addEventListener('focus', function(){this.type = "text"})

<input type="text" />

虽然我不确定为什么你想要首先掩饰它，如果你再次点击进入该领域时回来，但是¯\ _（ツ）_ /¯

Answer 2

$(function(){
$('#AccountNumber').on("focus", function() {
    $(this).attr('type', 'text');
});
$('#AccountNumber').on("blur", function() {
    $(this).attr('type', 'password');
});

    })

如何在未选择时屏蔽表单输入字段？

2 个答案: