标签：创建 小数点 数字键盘 问题 点击 开头 input 移动

项目要求：需要自己新建一个输入金额的页面，创建一个数字键盘

设计思路：页面上方的输入框用input制作，数字键盘使用table中的td制作，给td绑定点击事件，根据点击的td中的文本内容，直接存放在输入框中。

遇到的问题：

1.input在移动端点击后会自动调用手机自带的软键盘

2.金额有自己的输入规则，不能以0和小数点开头，规定小数点后面两位小数。要求将不符合要求的金额进行合理的处理

正则表达式：/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/

3.onclick点击问题

解决方案：

第一个问题 ：input在移动端点击的问题

    解决方案：1.一开始我用了div标签然后使用contenteditable=true将div变成可输入状态，但是还是会自动调用手机软键盘，分析原因是带有了input的属性

                     2.想到是由input引起的问题，我就讲input改成了span标签，在利用text（）文本方法的实现了显示金额但是不会调用手机自带的软键盘的问题

第二个问题：处理不符合规则的金额

                解决方案：使用了正则表达式，将以0开头的整数去除0，超出两位小数位的使用 Math.floor(val * 100) / 100;保留两位小数，以小数点开头的使用val.replace(/^\./g, "")切除小数点

正整数：/^[+]{0,1}(\d+)$/

以0开头：/^[0]+/

只能输入两位小数：/^(\d+)(.\d{0,2})?$/

以小数点开头：/^\./

第三个问题：移动端点击的问题，onclick可以替换成touchstart

标签：创建,小数点,数字键盘,问题,点击,开头,input,移动
来源： https://blog.csdn.net/dwx_firm/article/details/120174572

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。