jquery .replace() with regex prevents selecting all of value of input

Question

Select the top input, and then tab to the second. It will put your cursor at the end of the value, rather than selecting all. if you remove the javascript and run again, you can see this behavior doesnt happen.

Clueless.

Works fine for me in Firefox 13 – elclanrs Jul 05 '12 at 21:44 — elclanrs, Jul 05 '12 at 21:44

score 2 · Answer 1 · answered Jul 05 '12 at 21:46

2

There is nothing strange. keyup event reacts on TAB and executes your code

this.value = this.value.replace(/[^0-9\.]/g, "");

witch updates the value of the input field. That's why it first selects the field and then removes the selection.

answered Jul 05 '12 at 21:46

VisioN

143,310
32
282
281

I noticed my error and changed it right after to keydown and it fixes... doh. But there are other problems with it that were solved by other in the post. Thank you, though! – elzi Jul 05 '12 at 22:30

Mitya · Accepted Answer · 2012-07-05T22:30:03.447

2

$(function() {
    $('.numbersOnly').keyup(function (evt) {
        if ($.inArray(evt.which, [37, 38, 39, 40]) != -1) return false;
            this.value = this.value.replace(/[^\d\.]/g,'');
            if (evt.which == 9) this.select(); //<-- re-select field value
    });
});

Some other modifications I made:

pattern made shorter (using \d alias)
cursor keys are re-enabled (in your code they were blocked from working)
the selection happens only if the tab key was pressed, not merely any key

edited Jul 05 '12 at 22:30

answered Jul 05 '12 at 21:47

Mitya

33,629
9
60
107

And what about float numbers? – VisioN Jul 05 '12 at 21:51
And do not forget about the exclusion `^`. – VisioN Jul 05 '12 at 22:00
Think I'd better go to bed...! – Mitya Jul 05 '12 at 22:03
Я вот тоже думаю, что и мне пора ;) – VisioN Jul 05 '12 at 22:04
1

Thank you. I went with this solution. Technically, just switching my code to keydown "fixed" it - but this addresses other problems. Thanks again. – elzi Jul 05 '12 at 22:28

score 2 · Answer 3 · edited May 23 '17 at 12:04

Hiya there are few other issues like:

Working demo Smooth: http://jsfiddle.net/wWxVL/2/

The left arrow keys don't work.
The stuff is bit quirky when user type.
Tab/select all issue (known)

An awesome post here: How to allow only numeric (0-9) in HTML inputbox using jQuery?

Hope it helps, cheers

code

$(document).ready(function() {
    $(".numbersOnly").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    });
});

I went with Utkanos' solution, though this way taught me a lot and works just as well. Thank you very much. — elzi, Jul 05 '12 at 22:29

score 1 · Answer 4 · answered Jul 05 '12 at 21:47

1

When I tab (in chrome) to the second box, it doesn't go to the end of the value until i let go of the tab key(i.e. on keyup)

this.value = this.value.replace(/[^0-9\.]/g,'');

is being executed when you let go of the tab key

answered Jul 05 '12 at 21:47

Isaac Fife

1,659
13
15

Yeah, I'm a moron. keydown fixes, but there are other problems, as addressed by the other posters. – elzi Jul 05 '12 at 22:31

jquery .replace() with regex prevents selecting all of value of input

4 Answers4