Intercept input entering

Question

Is there a way to intercept the value the user inputs before it ever even appears in the element? I tried to use Object.defineProperty but it appears to not work for InputElement.value since

var value;
Object.defineProperty($('input')[0], 'value', {
    get: function() {return value},
    set: function(val) {console.log(val); value = val;}
});

doesn't appear to change any behavior. Or is oninput/onchange the only option? Since I'd rather have my code executes before the browser's.

http://jsfiddle.net/zpmu1xcu/

If JS is executing slowly for whatever reason, the value will be bad value for a short time before the handler fires. — Tahsis Claus, Oct 02 '15 at 21:49
Is this relevant to you? https://stackoverflow.com/questions/4355594/intercepting-all-key-presses-with-jquery-before-they-are-processed — Max Wofford, Oct 02 '15 at 21:57

score 2 · Answer 1 · answered Oct 02 '15 at 22:13

If you want to detect input before the text is entered by the browser, you can use the Element.onkeydown property. This event fires as soon as the key is pressed down, before the browser interprets the action.

var demo_i = document.getElementById('demo_i');
var demo_d = document.getElementById('demo_d');

demo_i.onkeydown = function(e) {
    demo_d.textContent = e.which;
    // Returning false stops the event from going any further
    return false;
}

<input id="demo_i"><div id="demo_d"></div>

Note that this doesn't work for Paste. – Cullub Nov 22 '22 at 15:11 — Cullub, Nov 22 '22 at 15:11

score 0 · Answer 2 · answered Oct 02 '15 at 22:14

is this what you are looking for?

function InterceptInputValue($input) {
  var value = $input.val();
  // intercept value that changes and saved to value variable
  $input.keydown(function(e) {
    value += String.fromCharCode(e.keyCode);
    return false;
  });

  this.getValue = function() {
    return value;
  };
}

var i = new InterceptInputValue($("input"));

$("input").blur(function() {
  alert('input value is: ' + i.getValue());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

score 0 · Answer 3 · answered Oct 03 '15 at 03:08

I think you're only option is keyup.

It is the only one that can capture the data and not leave any behind.

Using the snippet below, type test in each of the text boxes.
The code tries to reset the value to blank with each key stroke.

keyup is the only one that deletes the input with each stroke.

keydown clears the last character typed, once you leave the field.

keypress leaves the last character typed in the input field

var tbxKeyDown = document.getElementById('tbxKeyDown');
var tbxKeyUp = document.getElementById('tbxKeyUp');
var tbxKeyPress = document.getElementById('tbxKeyPress');

// [Jedi mind trick] ==> you entered nothing

tbxKeyDown.addEventListener('keydown', testKeyDown, false);
tbxKeyUp.addEventListener('keyup', testKeyUp, false);
tbxKeyPress.addEventListener('keypress', testKeyPress, false);

// Remove anything entered

function testKeyDown() {
  tbxKeyDown.value = '';
}

function testKeyPress() {
  tbxKeyPress.value = '';
}

function testKeyUp() {
  tbxKeyUp.value = '';
}

KeyDown  = <input type="text" id="tbxKeyDown"  value="" />

<br/><br/>

KeyUp    = <input type="text" id="tbxKeyUp"    value="" />

<br/><br/>

KeyPress = <input type="text" id="tbxKeyPress" value="" />

FYI: [onKeyPress Vs. onKeyUp and onKeyDown](http://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown) — WhiteHat, Oct 03 '15 at 03:17

Intercept input entering

3 Answers3