javascript/jquery input fields cleanup

Question

I've created a few input fields, that I am cleaning up as the user types.

So, I'm using a keystroke detection event, like .keyup()

It's all working very well, but I do notice one thing that's rather annoying for the users.

While the script is cleaning the data as they type, their cursor is being sent to the end of the input field.

So, if you want to edit the middle of the value, you're cursor immediately goes to the end of the box.

Does anyone know of a way to maintain the cursor's current position inside the input field?

I'm not holding my breath, but I thought I'd ask.

Here's the cleanup code I'm using:

$(".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

You'll need to store the caret position before modifying the value and restore it afterwards. This might involve some calculations to determine where it should end up after deleting some characters, but you can fine-tune that after you get the basics working. Here's the first hit on Google for jQuery caret positioning.

Answer 2

If I could make a suggestion, there might be a more elegant solution. Simply disallow non-numeric keys to be entered at all:

**Allow me to revise, this function should work better than the one previously posted:

    $(".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;
        }
    });

Of course, you'll probably want to fine tune a bit but this should get you started.

Also, if you're concerned about what dclowd9901 said above, you could display a validation message saying that non-numeric entries are not allowed, rather than simply swallowing the keystroke.

Answer 3

First of all, I'd recommend switching to keydown. It'll clean the input faster. Otherwise in some browsers the text will show up then disappear quickly. Attaching to keydown prevents that.

$(".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();
        }
    }
}

Also, why not reference $(this) in your function instead of hard coding in #itemprice

Answer 4

I recommend jQuery alphanumeric plugin: http://www.itgroup.com.ph/alphanumeric/