木子屋
 

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

作者: dnawo

日期: 2020-10-07 06:34 PM

分类: 其他

内容: 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)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms

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

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms