Question

我正在使用html input type ='number'字段设置PIN号（不允许输入字符），但是我希望在输入字符时将其屏蔽。

我是Web开发的新手。请帮帮我。

Answer 1

您可以这样使用-

<input type="password" pattern="[0-9]*" inputmode="numeric">

see details here

Answer 2

使用jQuery解决方案

$(function () {

  $('#pincode').bind('keyup paste', function () {
    this.value = this.value.replace(/[^0-9]/g, '');
  });

  $('#pincode').keyup(function () {
    var text = $(this).val().trim();
    $('#errorname').text(text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="sign_in_form">
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Enter PIN</label>
    <input type="password" name="pincode" id="pincode" maxlength="6" inputmode="numeric">
  </div>
  <div id="errorname"></div>
</form>

Answer 3

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#Setting_length_requirements

如果您想让输入type ='password'仅接受数字，我认为这会有所帮助

Answer 4

此代码示例可以作为您的答案吗？

function onlyNum(evt)
{
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    return !(charCode < 48 || charCode > 57);
}

const PIN_Cod = document.document.getElementById('PIN-COD');

document.getElementById('Show-PIN-COD').onclick = function()
{
  console.log(PIN_Cod.value);
}

<input id="PIN-COD" type="password" onkeypress="return onlyNum(event)" />

<button id="Show-PIN-COD">Show-PIN-COD</button>

如何在输入数字时显示输入类型数字中的掩码字符（例如星号“ *”）

4 个答案: