星空网 > 软件开发 > Java

input输入框的光标

上午的时候,以前一起配合Java后端的哥们问了个input光标的问题。

需求是这样:只能输入数字的input(一开始以为是输入金额这些的,后来才晓得是用来填写手机号)

他采用是直接百度来的如下方法:

<input type="text" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')">

完成需求是可以的,在用户体验上面有点问题,光标会自动移到末尾,导致无法通过键盘控制光标前进,只能在中间插入一个字符。

这哥们以前就只管java那块,js比我还水,所以让我给他改改。

给了两个方案:

一个是沿用之前的onkeyup;

<input type="text" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="onkeyupFn(this,event)">

function onkeyupFn(t,event){  var e = event || window.event;  var c = e.keyCode;  if (!(((c >= 48) && (c <= 57)) || ((c >= 96) && (c <= 105)) || c == 37 || c == 39 || c == 8)) {    t.value=t.value.replace(/\D/g,'');  }}

 

或者也可以用onkeydown,直接阻止除数字、前进、后退、删除以外的按键生效;

<input type="text" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeydown="onkeydownFn(event)">

function onkeydownFn(event){  var e = event||window.event;  var c = e.keyCode;  if (!(((c >= 48) && (c <= 57)) ||((c >= 96) && (c <= 105)) || c == 37 || c== 39 || c== 8)){    e.preventDefault ? e.preventDefault() : (e.returnValue = false);  }}

 




原标题:input输入框的光标

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

谷歌SEM和谷歌SEO的主要区别:https://www.kjdsnews.com/a/774441.html
2021年度Shopee东南亚、拉美和波兰市场热卖榜:https://www.kjdsnews.com/a/774442.html
Fnac电商平台好不好,法国Fnac平台怎么样:https://www.kjdsnews.com/a/774443.html
独立站推广引流的8个渠道,独立站卖家必须掌握:https://www.kjdsnews.com/a/774444.html
记录我亚马逊生涯的第一个爆款:https://www.kjdsnews.com/a/774445.html
【酷胖卖家必看】2022年Coupang平台新动向:https://www.kjdsnews.com/a/774446.html
NRA账户的开户主体包括:香港、美国、新加坡、欧盟等国家的详细解析 :https://www.kjdsnews.com/a/1842292.html
NRA账户的开户主体包括:香港、美国、新加坡、欧盟等国家的详细解析 :https://www.xlkjsw.com/news/94338.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流