Get the value of input text when enter key pressed

JavascriptHtmlInputKeycode

Javascript Problem Overview


I am trying this:

<input type="text" placeholder="some text" class="search" onkeydown="search()"/>
<input type="text" placeholder="some text" class="search" onkeydown="search()"/>

with some javascript to check whether the enter key is pressed:

function search() {
    if(event.keyCode == 13) {
        alert("should get the innerHTML or text value here");
    }
}

this works fine at the moment, but my question how to get the value inside the text field, I was thinking of passing a reference "this" to the function, or if they had id's then I could use ID's but then I don't see how I could differentiate between which one has been typed, bringing my back to the same problem again...

Javascript Solutions


Solution 1 - Javascript

Try this:

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>  
<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

JS Code

function search(ele) {
    if(event.key === 'Enter') {
        alert(ele.value);        
    }
}

DEMO Link

Solution 2 - Javascript

$("input").on("keydown",function search(e) {
    if(e.keyCode == 13) {
        alert($(this).val());
    }
});

jsFiddle example : http://jsfiddle.net/NH8K2/1/

Solution 3 - Javascript

Just using the event object

function search(e) {
    e = e || window.event;
    if(e.keyCode == 13) {
        var elem = e.srcElement || e.target;
        alert(elem.value);
    }
}

Solution 4 - Javascript

You should not place Javascript code in your HTML, since you're giving those input a class ("search"), there is no reason to do this. A better solution would be to do something like this :

$( '.search' ).on( 'keydown', function ( evt ) {
    if( evt.keyCode == 13 )
        search( $( this ).val() ); 
} ); 

Solution 5 - Javascript

Listen the change event.

document.querySelector("input")
  .addEventListener('change', (e) => {
    console.log(e.currentTarget.value);
 });

Solution 6 - Javascript

Something like this (not tested, but should work)

Pass this as parameter in Html:

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

And alert the value of the parameter passed into the search function:

function search(e){
  alert(e.value);
}

Solution 7 - Javascript

    const $myInput = document.getElementById('myInput');

	$myInput.onkeydown = function(event){
	    if(event.key === 'Enter') {
	        alert($myInput.value);        
	    }
	}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2405469View Question on Stackoverflow
Solution 1 - JavascriptbrgView Answer on Stackoverflow
Solution 2 - JavascriptAlexanderView Answer on Stackoverflow
Solution 3 - JavascriptepascarelloView Answer on Stackoverflow
Solution 4 - JavascriptGabinView Answer on Stackoverflow
Solution 5 - JavascriptDaniel De LeónView Answer on Stackoverflow
Solution 6 - JavascriptTim SommerView Answer on Stackoverflow
Solution 7 - Javascript Юрий СветловView Answer on Stackoverflow