HTML编号输入min和max无法正常工作

前端之家收集整理的这篇文章主要介绍了HTML编号输入min和max无法正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有type = number输入字段,我为它设置了最小值和最大值:
<input type="number" min="0" max="23" value="14">

当我使用输入字段右侧的小箭头更改渲染UI中的时间时,一切正常 – 我不能超过23或低于0.但是,当我手动输入数字时(使用键盘),那么这两个限制都没有效果.

有没有办法阻止任何人输入他们想要的任何数字?

解决方法

使用HTML5 max和min,您只能限制值以输入数字.但是你需要使用JavaScript或jQuery来做这种改变.我有一个想法是使用数据属性并保存旧值:
$(function () {
  $("input").keydown(function () {
    // Save old value.
    $(this).data("old",$(this).val());
  });
  $("input").keyup(function () {
    // Check correct,else revert back to old value.
    if (parseInt($(this).val()) <= 23 && parseInt($(this).val()) >= 0)
      ;
    else
      $(this).val($(this).data("old"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" min="0" max="23" value="14" />
原文链接:https://www.f2er.com/html/231273.html

猜你在找的HTML相关文章