javascript - 如何使文本框只接受 0-10 的数字,并且只接受小数部分的 0.5?
问题描述
我有一个文本框,用户只能在其中输入 0-10,允许的小数部分是 0.5,因此可以输入 0 或 .5 或 1.5 或 4 等等。在这里我可以添加所有数字:
<script>
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 10) input.value = 10;
}
</script>
<input type="text" onchange="handleChange(this);" />
我需要提醒输入错误并重置该文本框。
解决方案
扩展@Vishnu Badhoriya 的评论,我们也可以这样做:
HTML
<input id="number" type="number" min="0" max="10" step="0.5" onchange="roundHalf(this.value)">
JS (jQuery)
function roundHalf(num) {
if (num > 10) {
$('#number').val(10);
} else if (num < 0) {
$('#number').val(0);
} else {
$('#number').val(Math.round(num*2)/2);
}
}
您也可以采用非 jQuery 方法,但我之所以选择这样做是因为易于演示。这将确保用户无法输入自己的值。
在此处查看 CodePen 以查看它的实际效果:
https ://codepen.io/anon/pen/RBoJGB
编辑:忘记实现另一个约束,对于 0 <= num <= 10。将其添加到代码片段中。
推荐阅读
- python - Scrapy > IndexError:列表索引超出范围
- javascript - AJAX 仅返回最后一个数组项
- node.js - 如何从 JSON 中保存和读取数据
- android - 为什么 NetworkManager.addToQueueAndWait 的多个并行调用会相互干扰?
- react-native - React Native 进度填充屏幕
- c# - Asp.Net Core Web API 2.2 控制器不返回完整的 JSON
- java - 如何使用 akka BehaviorTestKit 从有类型的上下文中测试无类型的演员部署?
- python - Python Kivy - pos_hint 未使用代码在 FloatLayout 中更新
- google-sheets - 如何搜索多个字符串值并返回找到的字符串值?
- java - 在线程对象上调用 start 时,在线程上设置的优先级无效