Detect accentuation with regex in javascript on osx

Question

I need some help because I have troubles with detection of accentuate characters.

I have an application (html, css, js) working on both PC and MAC. It contains some input fields with following properties :

Text has to be numbers only
It must contain only 8 characters (so 8 numbers)
Each input is verified right away

Since the HTML input must contain a specific number of character I can't use the type="number", so it has the form : <input type="tel" maxlength="8"

My js function is the following one :

onChangeUserId: function (e) {
  var theEvent = e.view.event;
  var key = theEvent.keyCode || theEvent.which;
  keyValue = String.fromCharCode(key);
  var regex = /[0-9]{1,8}/;
  if (key === 13) {
    // validation function
  } else if (!regex.test(keyValue)) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
},

My problem is that this is working on Windows, but OSx seems to allow the following characters (which are all accents) : ^ ¨ `

I didn't make this code, I "just" have to fix this bug actually, so maybe I am missing some things? But I have searched for a loooong time on the Internet, tried many things (especially on the regex, but this part seems to be just fine in the end) and couldn't manage to find why I have this problem and how I can solve it :/

If some of you have the answer, I would be happy to hear it (I'm kind of desperate now é_è)

Thank you :)

EDIT

As vove suggested it here, I followed this stack link which leads me to this JSFiddle Demo . This demo works fine with my PC, but with my mac, it allows the characters ^ ¨ `, so even this example does not work for me :/
Is anyone else having the problem?

I don't know (this is not my code to begin with) but I assumed that keyValue was the new input char + the previous ones — Kris37, Mar 15 '16 at 14:22
^ ¨ ` are special characters having different code point than the letter with that accent, compare (á) and (´). I am almost 100% sure that when you disable those signs in the form field you can still use letters with those accents as writing the letters with accent on foreign keyboard doesn't print that sign, only the accented letter. That is if you don't spam it, for example pushing accent and a gives output á, pushing accent two times gives ´´ (same with diaereses and the other accent). Could you please check it and confirm? — , Mar 15 '16 at 14:31
I have an azerty keyboard on my mac, so (speaking only for mac) I can use both accents alone or letters with accents, and that is my problem, I think the regex should be avoiding that as it do on Windows — Kris37, Mar 15 '16 at 14:36
You mean the German layout? AFAIK to print out a letter with an accent on Spanish keyboard in Mac it's opt+e and then (a, e, i, o, u) to get á, é, í, ó or ú. It puts the accent first (which probably is your problem) and then puts it on a letter if you write any, but what I mean is to block the accents so they don't appear in the field but after using the appropriate letter it should print it with accent. Have you tried that? I cannot assure it will work as I am not sure how mac recognizes them (whether it is a keypress or preceding character). — , Mar 15 '16 at 14:50
https://ilovemymac.bachibouzouks.com/wp-content/uploads/2011/09/HT1171_01-wireless_keyboard-001-fr.png This is my keyboard. I have keys for the three characters ^ ¨ ` . When I press them in my app on mac, they appears from the first press (no need to had any letter). The regex should take this into account, since they are not numbers, but it doesn't and I want to know why, because I don't want those characters to appear. — Kris37, Mar 15 '16 at 15:02
I am afraid you didn´t get what I mean. You can search the boards for solution as it was asked many times (search for field input with numbers only), for example here: http://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values Adapt it to your needs. — , Mar 15 '16 at 15:30

score 1 · Accepted Answer · answered Apr 20 '16 at 08:59

I stopped trying to solve my problem a while ago but from what I remember part of it was that my code was using "onKeyPressed" function but this is not called when those keys are pressed, neither is "onKeyUp" btw. So I had to use "onKeyDown" function instead to detect when the pressed of those specific keys.

I think this issue may interest other people.

gurvinder372 · Answer 2 · 2016-03-15T14:21:04.433

0

You need to mark start and end of string in regex using $ and ^

your regex should be

/^[0-9]{1,8}$/

Example

/^[0-9]{1,8}$/.test("33333333") //returns true

and

/^[0-9]{1,8}$/.test("333333333") //returns false

Also, you need to test the entire input value, so replace your else-if with

else if (!regex.test(this.value)) {
  theEvent.returnValue = false;
  if (theEvent.preventDefault) theEvent.preventDefault();
}

edited Mar 15 '16 at 14:21

answered Mar 15 '16 at 14:17

gurvinder372

66,980
10
72
94

He is testing a single char – Alex K. Mar 15 '16 at 14:18
But the regex works fine on PC and I tested it using regex101.com, I don't have a problem for the number of characters, only those three specifically seems to pass throught the regex :/ – Kris37 Mar 15 '16 at 14:28
Your Regex is checking for 8 numbers anywhere in the input rather than only 8 numbers – gurvinder372 Mar 15 '16 at 15:02

guest271314 · Answer 3 · 2016-03-15T15:45:32.233

0

You could use maxlength attribute set to 8 ; pattern attribute with RegExp \d{8} to prevent form submission if input value does not match eight digits; input event containing if condition with RegExp /\D/ utilizing RegExp.prototype.test() to check if input contains character that is not a digit; set value to empty string "" if it is not a digit

document.querySelector("input[type=tel]")
.addEventListener("input", function() {
  if (/\D/.test(this.value)) {
    this.value = "";
    alert("eight numbers required")
  }
})

<form>
  <input type="tel" pattern="\d{8}" maxlength="8" placeholder="input eight numbers" required />
  <input type="submit" />
</form>

edited Mar 15 '16 at 15:45

answered Mar 15 '16 at 14:42

guest271314

1
15
104
177

Well, the code I use may not be entirely optimized or what, but at least it is ok for the detection of the number of character. I tried to change my `/[0-9]/` for your `/\D/` (even if I tried many of these before coming here) but I still can type those 3 characters (^ ¨ `) so it doesn't change anything – Kris37 Mar 15 '16 at 15:10
This is not a good answer. You can still copy paste whatever into the field and it slices only the last character. – Mar 15 '16 at 15:23

Detect accentuation with regex in javascript on osx

3 Answers3