How to call function from text input key press in javascript?

javascript onkeypress
abalter picture abalter · Mar 1, 2015 · Viewed 31.9k times · Source

With

<input type="text" onKeyPress="alert(this.value)">

the alert box displays the value in the box, not included the current key depressed.

However, this does not exhibit the same behavior, and I don't know why.

<input type="text" onKeyPress="handleInput(this.value)">

function handleInput(value){
    alert(value);
}

Added This http://jsfiddle.net/abalter/adbbb599/6/

Answer

ismnoiet picture ismnoiet · Mar 1, 2015

First thing is avoid using js code inside html tags it is a bad practice , you can use the keyup event to get the content of the input after the user release any pressed key 

<input id="input">

<script>
  var input = document.getElementById('input');
  input.addEventListener('keyup',function(){alert(input.value);});

</script>

Related questions

How to handle the `onKeyPress` event in ReactJS?

How can I make the onKeyPress event work in ReactJS? It should alert when enter (keyCode=13) is pressed. var Test = React.createClass({ add: function(event){ if(event.keyCode == 13){ alert('Adding....'); } }, render: function(){ return( <div> <input type="…

Read More
How to capture Enter key press?

In my HTML page, I had a textbox for user to input keyword for searching. When they click the search button, the JavaScript function will generate a URL and run in new window. The JavaScript function work properly when the …

Read More
How to get text of an input text box during onKeyPress?

I am trying to get the text in a text box as the user types in it (jsfiddle playground): ​ The code runs without errors, except that the value of the input text box, during onKeyPress is always the value before …

Read More