你的位置:首页 > Java教程

[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);  }}