HTML5表单使用type=number激活数字键盘存在的问题及解决方法

👤 dnawo 📅 2020-10-07 👁 3076 👍 0 💬 0 🔄 来源：本站原创

HTML5页面表单有一项为产品价格，为了方便输入希望在输入价格时直接激活数字键盘，尝试将输入框类型text改成了number：

<input type="number" id="price" />

测试了下，更改之后输入框只能输入数字，不能输入其他字符，粘贴也不行，效果不错：

不久发现了新的问题，有输入产品价格，提交表单却提示价格不能为空。给输入框添加监听事件，最终发现了问题的原因：number输入框不能有非数字字符，否则取到的值都是空！

$('#price').bind('input propertychange', function() {
    $('body').append("<br/>content:"+$('#price').val());
});

val方法取不到输入值，也就没办法对输入内容做转换，最终将文本框类型更改成tel，问题解决：

<input type="tel" id="price" />

暂无评论。

评论（0）