0

I have a textField and I am trying to validate it for hex values. I got a pretty good validator here. When the user presses ctr-a, it's supposed to exit the keyup event function. I used return.

The problem is, it doesn't. When you press ctr-a, the if-statement of if ctr-a is true, but it doesn't return, it doesn't exit the function. It goes straight to the next part.
How can I exit the function when the user presses ctr-a?

JSFiddle

document.getElementById('textField').addEventListener('keyup', function(e) {
  var keycode = e.keyCode || e.which
    // Allow: tab, home, end, left, up, right, down
  if ([9, 36, 35, 37, 38, 39, 40].indexOf(keycode) !== -1 ||
    // Allow: Ctrl || Command && a, c, x and v
    (!0 === e.ctrlKey || !0 === e.metaKey) && /65|67|88|86/.test(keycode)) {
    if (keycode === 86 && /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(e.target.value)) {
      console.log('Do Something with valid PASTED Hex Color');
    }
    console.log('Should return after this');
    return;
  }

  if (/^[0-9A-F]{6}$/i.test(e.target.value)) {
    console.log('Do Something with valid Hex Color');
  }
});
<input type="text" id="textField" spellcheck="false" maxlength="6" />

Please no JQuery answers.

Community
  • 1
  • 1
Jessica
  • 9,379
  • 14
  • 65
  • 136
  • Try `e.preventDefault();`. – Sebastian Simon Mar 03 '16 at 01:42
  • You probably need to check for when the `Ctrl` key is depressed on its own (`keycode === 17 && e.ctrlKey === false` )... – IronGeek Mar 03 '16 at 02:00
  • You should use `keypress` instead of `keyup`. Because `keyup` runs when the control key is released **after** they've already released the letter that they typed with it. So at that point there's no keycode any more. – Barmar Mar 03 '16 at 02:03
  • @Xufox That didn't work. – Jessica Mar 03 '16 at 02:24
  • @IronGeek How will that help? The problem is it ignores `return` but the if statement is still executed – Jessica Mar 03 '16 at 02:25
  • @Barmar But the if statement executes. The problem, I think, is with return. It somehow gets ignored – Jessica Mar 03 '16 at 02:25
  • No, the return is not ignored. When you type Control-a, the event handler runs twice: first when you release the `a`, then again when you release `control`. When it runs the second time, the `if` doesn't execute, so it goes to the next part. – Barmar Mar 03 '16 at 02:28
  • @Jessica what Barmar said. It's two different event raised. First one ends up in `return`, while the next one didn't. See here: https://jsfiddle.net/aeop5e6e/1/ – IronGeek Mar 03 '16 at 02:31
  • @Barmar Thanks! That is the problem! I tried your solution of using `keypress` instead. The problem with that is, if you type in 6 chars, it doesn't 'update', it doesn't log until you enter another char. Do you get what I'm saying? https://jsfiddle.net/k56j6opx/ – Jessica Mar 03 '16 at 02:47
  • @IronGeek Thanks! That clears things up. I think Barmar figured out the problem! – Jessica Mar 03 '16 at 02:47
  • @Jessica Yeah, problem is that `keypress` is only guaranteed to be generated for character keys, not control operations. I think you can go back to `keyup`, but you need to check when `control` is set but `keycode` is 0, and ignore it. – Barmar Mar 03 '16 at 02:53
  • @Barmar I logged keycode and it never came out to 0. https://jsfiddle.net/3gw21kyj/ Can you show me an example? – Jessica Mar 03 '16 at 03:52
  • I was wrong about keycode being 0, there's a keycode for the control key. So if you type control-a, when you let go of the keys you'll get separate keyups for keycode = 65 (`a`) and keycode = 17 (`control`). The order of them depends on which key you release first, and this also control whether `e.ctrlKey` is set when you get the keyup for `a`. See https://jsfiddle.net/barmar/3gw21kyj/4/. Getting this right in your code will be complicated, I think. – Barmar Mar 03 '16 at 16:05
  • @Barmar Do you have any suggestions? – Jessica Mar 03 '16 at 18:55
  • Sorry, I don't know how to fix it. Are you sure you need to detect specific keycodes like this? – Barmar Mar 03 '16 at 18:56
  • @Barmar The only reason I'm doing it is because I have to `return`. The reason I have to, is because in the last if statement, the code that executes unhighlights the selected text. If you want, I can give an example – Jessica Mar 03 '16 at 18:58

0 Answers0