有很多时候都会需要要求限制输入款的输入的,那么什么体验好点呢
如下是本人觉得比较好的体验:
输入认为非法的字符自动覆盖,只保留正确的输入正确的文本
代码如下:
<input onkeyup="this.value=this.value.replace(/^\.|^0\d{1,}|\.{2,}|[^.\d]|\..*\./g,'');" onblur="this.value=this.value.replace(/\.$/g,'');"/>
说明如下:
在input原属添加两个监听事件(onkeyup,onblur)
其中在onkeyup添加的解释如下
1.
this.value=this.value.replace(/^\.|\.{2,}|[^.\d]|\..*\./g,'');
(^\.)所有以'.'开头的,
(\.{2,})'.'重复出现2次或以上的,
([^.\d])非数字的字符'.'除外,
(\..*\.)同时出现两个'.',
(^0\d{1,})以0开头的数字(单独输入一个0是可以的),都用空字符串替换掉
2.
this.value=this.value.replace(/(\d+)\.(\d\d).*$/,'$1.$2');
只保留小数点后面2位小数
然后是在onblur事件中添加的处理代码
this.value=this.value.replace(/\.$/g,'');
这个是处理当用户最后一个字符是'.'就不操作的时候,自动的帮用户去掉那个多余的字符串
下面顺带介绍一下几个页面事件
onkeyup事件会在键盘按键被松开时发生
onkeydown是按下的时候触发的
onfous页面控件获得焦点
onblur失去焦点
分享到:
相关推荐
请输入数字,只能输入数字哦:<input "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
(一)TEdit、TDBEdit、TComboBox、TDBComboBox的输入 分三种类型限制: ...(2)浮点输入只能输入数字0-9、+、-、. (3)+和-只能有其一,并且只能出现在最前面 (4).只能有一个 (5)限制小数位数
只能输入数字的控件,限制字符,其它字符不能输入。
el-input限制输入框只能输入数字
NULL 博文链接:https://jinhanjiang.iteye.com/blog/670223
主要介绍了通过js实现input输入框只能输入数字的实现方法,主要是通过正则表达式替换实现,需要的朋友可以参考下
自己写了个winForm处理文本框只能输入数字,与大家分享
用ASCII码和正则分别实现限制输入框输入数值
主要介绍了angular inputNumber指令输入框只能输入数字的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Js高亮显示文本输入框.rarJs高亮显示文本输入框.rarJs高亮显示文本输入框.rarJs高亮显示文本输入框.rar
请输入数字或字母:<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData ('text').replace(/[^\d]/g,''))">
input框只能输入数字和一个小数点,对界面验证很好用
vc获取网页中输入的密码和文本输入框的内容.zip
输入框只能是数字的判断方法,能兼容的两种方法,JavaScript的方法
本资源可以满足金额有关的一些input框输入,只能输入类似10.001的数据,并且小数点前第一位不能是0,我使用这个是为了管理后台做版本控制,我们只需要1.11这种格式的版本号
2、主要功能:限定文本输入框输入特定的字符个数, 文本长度计算规则:中文占1,英文等能转ascii的占0.5 3、特色功能: iOS限制联想字符串输入,汉字占2个字符,英文占1个字符,解决的中英文切换输入法联想导致的...
网页自动填表——文本输入框及多行文本输入框自动填写方法
只能输入数字小数点负号正则.用于金额的验证等
只能输入数字的文本框控件
主要介绍了Angularjs中的验证input输入框只能输入数字和小数点的写法,需要的朋友可以参考下