Get the value of input text when enter key pressed

Question

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...

Brandabrandais

You can pass this and get this.value for the current target/textfield! – Eduino

"should get the innerHTML inputs do not have innerHTML... – Kekkonen

yeah I should have tried passing this first, thank you for the confirmation though. – Brandabrandais

Answer 1

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

Lincolnlincolnshire

First I thought there was an error in it, then I tried: Works perfectly and is the finest vanilly approach I could find. Thx. – Nineteen

Just a quick change for someone who might find this by any chance, in HTML5 it should be onkeypress instead of onkeydown and event.keyCode == 13 for 'Enter' key. – Calia

Also, in HTML5, 'search(this)' should be 'search(event)', from which you read 'ele.keyCode === 13' to get whether Enter was pressed. keyword 'this' doesn't work. – Alleged

onkeypress and keyCode both deprecated... developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event – Thready

Answer 2

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

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

Deglutition

Isn't it jQuery version. But I guess he want solution in plane javascript. – Lincolnlincolnshire

or use jQuery, that is also a great answer, thank you, I opted for normal Javascript, but this is just as awesome, thank you :) – Brandabrandais

sorry when I said "or use jQuery", I meant that everyone is giving a pure javascript solution and this is a jquery solution, in a jokey tone... – Brandabrandais

Answer 3

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);
    }
}

Kekkonen

Please describe exactly what this function does. – Munition

Answer 4

Listen the change event.

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

Ane

Answer 5

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

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

Entresol

Answer 6

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() ); 
} ); 

Mannikin

Answer 7

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);
}

Cracy

Answer 8

<input type="text" onkeypress="search(event)">

function search(event) {
  let value= event.which;
  if(value === 13){

   // use this to prevent form submit
     event.preventDefault();

   //call your function or anything else
     alert('x');
  }
}

Wheelhouse

Answer 9

  const searchInput =  document.getElementById('urlInput');

searchInput.addEventListener('keydown',(e)=>{
    console.log(e.key)
    if(e.key == 13){
        const elem =  e.target
        console.log(elem.value);
    }
})

<input id="urlInput" type="text" placeholder="some text" class="search"/> 
  

Ridgley