时间戳

首页 > 解决方案 > 我想限制用户输入以 5 结尾的数字

javascript - 我想限制用户输入以 5 结尾的数字

问题描述

这是文本字段。我希望用户只输入像 210,220,230,... 之类的值，并限制输入像 215,225,...

我正在寻找建议。我对 javascript 了解不多。

标签： javascripthtmlformstext

解决方案

您可以从,或处理程序setCustomValidity()中试验input元素 ( https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement )。如果您对该值不满意，请设置错误消息，否则设置空字符串。只要错误信息设置为非空，就会显示并且表单拒绝提交：onbluronchangeoninput

function check5() {
  cgiftcardq.setCustomValidity(cgiftcardq.value.endsWith('5')?"Nope, it can not end with 5":"");
}
<form>
  <input name="cgiftcardq" class="text_field" id="cgiftcardq" size="3" autocomplete="off" type="text" onblur="check5()">
  <input type="submit" value="Send">
</form>

（StackOverflow 片段会干扰表单提交 - 可能是作为安全性的一部分 - 所以成功提交只会使表单消失）

由于setCustomValidity()并非在任何地方都可以使用（根据兼容性表，它不适用于非 Andorid 手机），也可能会提到经典的“预算”解决方案：只要您对输入不满意，您可以简单地禁用发送按钮：

function check5() {
  if(cgiftcardq.value.endsWith('5')){
    send.disabled=true;
    message.innerHTML="Nope, it can not end with 5";
  } else {
    send.disabled=false;
    message.innerHTML="OK";
  }
}
<form>
  <input name="cgiftcardq" class="text_field" id="cgiftcardq" size="3" autocomplete="off" type="text" oninput="check5()">
  <input id="send" type="submit" value="Send" disabled>
</form>
<div id="message"></div>

推荐阅读