H5 输入框text和number切换
来源:互联网 发布:控制台窗口界面编程 编辑:程序博客网 时间:2024/06/01 07:58
这次的项目遇到一个关于输入金额的需求:input输入框聚焦时弹出数字键盘,只能输入数字,可以带两位小数,失去焦点时显示格式化后的金额,包含千分位和保留两位小数,如“12,000,000.00”。
看起来需求并不复杂,在做的过程中,发现难点在于 数字和格式化后的数字,这里关于输入框的type类型肯定是不一样的:
1.用户聚焦时谭树数字键盘,我们会用type=”number”类型;
2.显示格式化后的金额,因为要求有千分位(逗号),所以如果是type=number类型是肯定不行的,因为type=number不支持输入逗号,如果强行赋值会得到空值,如”12,000.00”,”1,” 会得到 “”,所以只能为type=text;
3.type=text和type=number切换导致软键盘弹不出;
4.软键盘弹出时,虽然聚焦了但是输入框没有在页面可视区域;
之前试过的方法:
1.聚焦时用js改变type属性
$("#input").on("focus",function(){ $(this).prop("type","number");});$("#input").on("blur",function(){ $(this).prop("type","text");});
这种方法看起来没错,但是在有的设备上会有问题,在iPhone5上会出现再次聚焦时不会弹出数字键盘,而是文本键盘,原因在于聚焦时的上一次type为text(因为失去焦点变为text了),弹出的键盘由上一次的type决定,所以弹出的是text键盘,然后才执行$(this).prop("type","number");
这时候系统不会再自动切换键盘了。
*先执行focus事件,再执行click事件。
*focus事件执行后,会根据input的上一个type属性弹出相应的键盘,且用js改变type属性后,不会再次改变键盘。
2.采用touchstart,touchmove,touchend代替click执行事件
原因是 touch事件在focus事件前面执行,所以想法是在touch 的时候执行type类型的转换操作。后来发现也不行,在手指滑动的时候会出现input清空,原因是在text情况下获取的值可能为空。代码就不贴了,直接看最终解决办法吧。
最终选择方案:事件代理
原理:在input框的外面再套一层div,设置宽高和input一样,设置外层div的click事件为捕获模式,捕获模式会依次触发外层div到input目标元素的事件,这样我们可以在外层div的事件中设置里层input框的type属性,这样就可以保证type属性的变化是在input的focus事件之前执行。
代码如下:
<div id="input"> <input type="text" id="aa" /></div><script> document.getElementById("input").addEventListener("click",function(){ $("#aa").prop("type","number").val(12); $("#aa").focus(); },true); $("#aa").on("blur",function(){ $("#aa").prop("type","text").val("12,000,000.00"); });</script>
需要注意的是:
1.`$(“#aa”).prop(“type”,”number”).val(12); 这里是赋历史值,如果是number类型里面注意放number类型的值,如果是格式化后的值,注意转换下。具体情况具体看。
- H5 输入框text和number切换
- 去掉H5中number输入框的上下箭头
- H5输入框挡住解决
- h5键盘遮挡输入框
- text输入框样式
- number输入框
- 语音输入和文字输入动画切换
- div模拟text输入框
- 设置密码输入框明文和密文切换
- 密码框输入的显示和隐藏切换
- H5中的输入框自动填充表单
- h5的一些基本的输入框
- h5获取输入框中的内容
- h5 安卓input输入框和改变div 字体颜色
- text文本输入表单input和textarea
- H5游戏中实现后台和游戏间的切换
- h5键盘遮挡输入框问题 、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框
- input number类型和text类型的区别
- CleanMyMac 3.9 破解版免费下载
- 贝塞尔二次拟合工具类
- mycat-配置分片的步骤
- 弱省胡策Round5 Handle
- fork, vfork, clone 与 pthread_create 的区别
- H5 输入框text和number切换
- JS elementary 2017-07-29
- 博士生应慎读文献
- 基础篇-你应该知道的Activity
- 【java.lang.UnsupportedClassVersionError】版本不一致出错
- python 数据图表呈现
- AVL树C++实现
- c语言排序算法(所有的都是升序,冒泡排序、插入排序、快速排序、选择排序、希尔排序、堆排序 )
- 9