input输入框的光标

最新推荐文章于 2025-07-09 14:38:42 发布

转载最新推荐文章于 2025-07-09 14:38:42 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/canrz/p/4939754.html

文章标签：

#java #后端

上午的时候，以前一起配合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);
    }
}

转载于:https://www.cnblogs.com/canrz/p/4939754.html