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

You can pass `this` and get `this.value` for the current target/textfield! — Dhaval Marthak, Jan 08 '14 at 14:39
yeah I should have tried passing this first, thank you for the confirmation though. — user2405469, Jan 08 '14 at 14:42

score 112 · Accepted Answer · edited Oct 10 '17 at 14:03

112

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

edited Oct 10 '17 at 14:03

Bin Ury

645
7
20

answered Jan 08 '14 at 14:41

Dhanu Gurung

8,480
10
47
60

1

First I thought there was an error in it, then I tried: Works perfectly and is the finest vanilly approach I could find. Thx. – Xan-Kun Clark-Davis Jul 07 '16 at 05:29
9

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. – Hokhy Tann Mar 07 '18 at 15:38
4

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. – DocWeird Oct 11 '19 at 13:04
`onkeypress` and `keyCode` both deprecated... https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event – Jiří Oct 12 '22 at 11:11

score 22 · Answer 2 · answered Jan 08 '14 at 14:44

22

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

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

answered Jan 08 '14 at 14:44

Alexander

12,424
5
59
76

4

Isn't it jQuery version. But I guess he want solution in plane javascript. – Dhanu Gurung Jan 08 '14 at 14:46
1

or use jQuery, that is also a great answer, thank you, I opted for normal Javascript, but this is just as awesome, thank you :) – user2405469 Jan 08 '14 at 14:46
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... – user2405469 Jan 08 '14 at 14:50

score 12 · Answer 3 · answered Jan 08 '14 at 14:42

12

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

answered Jan 08 '14 at 14:42

epascarello

204,599
20
195
236

Please describe exactly what this function does. – Dominic Cerisano May 18 '23 at 20:20

score 4 · Answer 4 · answered Feb 03 '20 at 07:21

4

Listen the change event.

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

answered Feb 03 '20 at 07:21

Daniel De León

13,196
5
87
72

Юрий Светлов · Answer 5 · 2021-12-25T18:25:09.820

3

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

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

edited Dec 25 '21 at 18:25

answered Dec 25 '21 at 15:53

Юрий Светлов

1,622
2
23
27

score 2 · Answer 6 · answered Jan 08 '14 at 15:16

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

score 1 · Answer 7 · edited Jan 09 '14 at 11:06

1

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

edited Jan 09 '14 at 11:06

BenMorel

34,448
50
182
322

answered Jan 08 '14 at 14:40

Tim Sommer

419
2
15

Keep It Simple · Answer 8 · 2023-08-15T13:27:05.403

0

  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"/>

edited Aug 15 '23 at 13:27

answered Aug 15 '23 at 13:24

Keep It Simple

1
1

Get the value of input text when enter key pressed

8 Answers8

Linked