jQuery replace with regex not working correctly

Question

I want to exclude all characters which are not a digit or minus.

What strikes me is that I cannot start with a minus or enter it anywhere. Only after digits and using the keyboard arrow button is entering a minus possible.

What I would like is being able to just enter -60 or something the like. What should I change?

$('.minus').keyup(function() {
  var txt = $(this).val();
  var nwtxt = txt.replace(/[^\d-]/ig, "");
  $(this).val(nwtxt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" maxlength="9" class="tekstvakjes minus">

By exclude, you mean remove right?

TheLostMind
– TheLostMind

2017-01-30 12:59:11 +00:00
Commented Jan 30, 2017 at 12:59 — TheLostMind
– TheLostMind, Commented Jan 30, 2017 at 12:59
So you want to allow negative numbers only?

baao
– baao

2017-01-30 13:01:04 +00:00
Commented Jan 30, 2017 at 13:01 — baao
– baao, Commented Jan 30, 2017 at 13:01
No, I want to include both negative and positive numbers

Webconstructor
– Webconstructor

2017-01-30 13:02:18 +00:00
Commented Jan 30, 2017 at 13:02 — Webconstructor
– Webconstructor, Commented Jan 30, 2017 at 13:02
All other characters must be removed

Webconstructor
– Webconstructor

2017-01-30 13:02:50 +00:00
Commented Jan 30, 2017 at 13:02 — Webconstructor
– Webconstructor, Commented Jan 30, 2017 at 13:02
Make input type as text instead number

Vijay Mishra
– Vijay Mishra

2017-01-30 13:03:21 +00:00
Commented Jan 30, 2017 at 13:03 — Vijay Mishra
– Vijay Mishra, Commented Jan 30, 2017 at 13:03

Vijay Mishra · Accepted Answer · 2017-01-30 13:09:28Z

3

Instead of using input type number use text

answered Jan 30, 2017 at 13:09

Vijay Mishra

3502 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaddath Over a year ago

what i was about to say (it is because the number type adds a validation before the keyup event fires, and removes the value if not conform, before if even fires the event)

Joel Harkes · Accepted Answer · 2017-01-30 13:17:31Z

I think it's some kind of browser defence meganism that whenever you insert something that is not a number inside a number input field and you request the value from it, it will simply be null/undefined. On type="text" it looks like this is fine.

Also note your cursor is always put at the end of the text, because you replace the text always. So you can't insert a - (dash) before a number with only keyboard interaction. and a dash anywhere but in front of a number is invalid!

You can try to type in -60 in the number field as well but you first need to insert. 60 and then the minus character.

also its better to use $('.minus').input( instead of keyUp, since you can use the mouse to insert values as well (and the scroll wheel).

$('.minus').keyup(function() {
  var txt = $(this).val();
  console.log("value i got:",txt); //i added this logging to see that you didn't get anything on number.
  var nwtxt = txt.replace(/[^\d-]/ig, "");
  if(nwtext !==txt) //add this if statement so your cursor does not constantly jump to the end!
    $(this).val(nwtxt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" maxlength="9" class="tekstvakjes  minus" placeholder="number">
<input type="text" maxlength="9" class="tekstvakjes  minus" placeholder="text">

Collectives™ on Stack Overflow

jQuery replace with regex not working correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related