javascript/jquery输入字段清理

我已经创建了一些输入字段，随着用户的键入，我正在清理这些字段

因此，我使用了一个击键检测事件，比如

.keyup（）

这一切都很好，但我确实注意到一件事，这是相当恼人的用户

当脚本在键入数据时清理数据时，其光标将被发送到输入字段的末尾

因此，如果要编辑值的中间部分，则光标会立即转到框的末尾

有人知道在输入字段中保持光标当前位置的方法吗

我没有屏住呼吸，但我想我会问的

以下是我正在使用的清理代码：

$(".pricing").keyup(function(){

   // clean up anything non-numeric
   **var itemprice = $("#itemprice").val().replace(/[^0-9\.]+/g, '');** 

   // return the cleaner value back to the input field
   **$("#itemprice").val(itemprice);**

});

---

您需要在修改值之前存储插入符号位置，然后再恢复它。这可能需要进行一些计算，以确定删除某些字符后应该在何处结束，但您可以在基本操作完成后对其进行微调。这是答案。

如果我能提出一个建议，可能会有一个更优雅的解决方案。根本不允许输入非数字键：

**请允许我修改，此功能应该比以前发布的功能更好：

    $(".pricing").keypress(function(event) {
        // disallow anything non-numeric
        var nonNumeric = /[0-9\.]+/g;
        var key = String.fromCharCode(event.which);
        if (!(key == '' || nonNumeric.test(String.fromCharCode(event.which)) || event.which == 8 || event.which == 13)) {
            return false;
        }
    });

当然，您可能需要进行一些微调，但这应该可以让您开始

---

此外，如果您关心dclowd9901上面所说的内容，您可以显示一条验证消息，说明不允许非数字输入，而不是简单地接受击键。

首先，我建议切换到keydown。它将更快地清理输入。否则，在某些浏览器中，文本将显示，然后很快消失。附加到keydown可防止出现这种情况

$(".pricing").keydown(function(){

   // clean up anything non-numeric
   var cursor = getCaretPosition($("#itemprice"));
   **var itemprice = $("#itemprice").val().replace(/[^0-9\.]+/g, '');** 

   // return the cleaner value back to the input field
   **$("#itemprice").val(itemprice);**
   setCaretPosition($("#itemprice"), cursor)

});

function GetCaretPosition (ctrl) {
    var CaretPos = 0;

    if (document.selection) {  // IE
        ctrl.focus ();
        var Sel = document.selection.createRange ();
        var Sel2 = Sel.duplicate();
        Sel2.moveToElementText(ctrl);
        var CaretPos = -1;
        while(Sel2.inRange(Sel))
        {
            Sel2.moveStart('character');
            CaretPos++;
        }
    }

    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {  // Others
        CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
}

function setCaretPosition(elem, caretPos) {
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

---

另外，为什么不在函数中引用

$（this）

，而不是在

#itemprice

中进行硬编码呢？我建议使用jQuery字母数字插件：

作为一个非常不喜欢在达到某个字符限制时自动跳转到下一个字段的人，首先，我能说这似乎是一个误导性的努力吗？我很欣赏这些花言巧语，但有时让用户的输入在不受他们控制的情况下做一些奇怪的事情会让用户感到沮丧。请记住，这是一种javascript方法，需要与服务器端验证同等匹配。用户可以同样轻松地禁用javascript或更改您的javascript并绕过您的努力。这是一种更聪明的方法。