javascript/jquery 输入字段清理

Question

我创建了一些输入字段，当用户键入时我正在清理这些输入字段。

因此，我正在使用击键检测事件，例如 .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);**

});

Answer 1

如果我可以提出建议，可能会有更优雅的解决方案。只需完全禁止输入非数字键即可：

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

    $(".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 上面所说的内容，您可以显示一条验证消息，指出不允许非数字输入，而不是简单地吞下击键。

Answer 2

您需要在修改值之前存储插入符号位置并在修改后恢复它。这可能需要一些计算来确定删除一些字符后应该在哪里结束，但是您可以在基础知识工作后对其进行微调。这是Google 上首次出现的 jQuery 插入符定位。

Answer 3

首先，我建议切换到 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 中进行硬编码

Answer 4

我推荐 jQuery 字母数字插件： http://www.itgroup.com.ph/alphanumeric/