0

我有一个输入字段，用户可以在其中输入 OTP。我需要确保用户只能输入数字，并且最多可以包含 6 位数字。我想用星号掩盖 OTP。我知道使用类型作为密码会屏蔽，但在我的场景中，我想在几毫秒后屏蔽，而不是立即屏蔽。用户可以在移动浏览器中看到输入的数字几毫秒，但桌面浏览器并非如此

<input type="密码" />

我找到了一个使用 jQuery 掩码库的插件 Passwordify.js，它真的很容易使用，它掩码

<输入类型="文本" />

https://www.jqueryscript.net/form/mask-password-asterisk-passwordify.html

现在的问题是值本身变成了 ****** 但我需要将实际值例如 878787 作为 otp 发送到后端。

除此之外，我还有一个默认禁用的提交按钮，只有在 otp 输入字段中有 6 位数字时才应启用。

这是我的代码

    <input type="text" id="otp" name="otp" data-val="" value="" placeholder="Enter OTP" autocomplete="off" autocorrect="off" autocapitalize="off" autofocus>
    <button id="otpsubmit" disabled>Login </button>
    $(document).ready(function(){
        $("#otp").passwordify({
            maxLength: 6,
            numbersOnly: true,
        });
    });
    $("#otp").on('change',function(){
        var inputVal = $(this).val();
        if(inputVal.length >= 6) {
            $('#otpsubmit').attr('disabled',false); 
        }else {
            $('#otpsubmit').attr('disabled',true);  
        }   
    });

我想知道是否有人使用这些库来做类似的事情，请建议我如何正确使用它。即使不使用这些库，我也愿意寻找其他解决掩蔽问题的方法。

我想提一下，使用这些库已经解决了移动和桌面浏览器中数字输入场景的屏蔽和验证，现在唯一的问题是保留用户输入的实际值而不是******

我也尝试过 keydown、keypress 和 keyup，但 e.key 总是 Unidentified 并且 e.keyCode 在 android chrome 中总是 229。

提前致谢

4

1 回答 1

0

你可以试试这个插件https://github.com/RobinHerbots/Inputmask

它具有获取掩码值的功能。还要检查您的插件方法。应该有一个函数来检索该值。

于 2021-07-01T05:09:49.033 回答