Faridoon
Faridoon

Reputation: 154

How to call a JavaScript function after pressing Enter key in Input type="text"?

How do I call a function, get(), which will retrieve meaning of a word typed in a text box after the user presses the Enter key?

I am adding my code below, nothing worked till now; please please add your corrections to the code, I know the code is too poor.

<script type="text/javascript" src="jquery.js"> </script>


<script type="text/javascript">

function get() {
$('#meaning').hide();
$.post('data.php', { name: form.wordfield.value }, 
function(output)   {

$('#meaning').html(output).fadeIn(1000);
});
}



</script>



</head>
<body>

<div id="container" style="width:100%">
<div id="header">

<ul>

<!--  <li><a href="#">Home</a> </li>-->
</ul>


</div>
<div id="logo" style="width: 10%; float:left; position:fixed; top:0px;                 z-index:-1;">         <img src="logo.gif"></img></div>
<p>
<div id="searchform">
<form name="form" >

<input type="text" name="wordfield" onKeyup="get();"><input type="button"    value="Translate" onClick="get();"> </form>
</div>
<div id="meaningbox">
</div>
<div id="meaning">

</div>
</p>
<div id="ad" style="width: 10%;float:right;"><!-- add section --></div>
<div id="footer">footer div goes here </div>
</div>
</body>
</html>

Upvotes: 1

Views: 13879

Answers (7)

Marnick Hartgers
Marnick Hartgers

Reputation: 1

Or you use this. i think this is the best way because debugging with the console is way easier.

<input id="lookup-field" onchange="name of the function"/>

Upvotes: 0

pork-chop
pork-chop

Reputation: 83

Here's what worked for me:

$("#inputIDHERE").bind('keypress', function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
        get();
    }
});

I also added <form></form> around my input tag, though that may not be necessary.

Upvotes: 0

bobince
bobince

Reputation: 536389

Well, you can bind an event to the keydown or keypress event, and test what key was pressed.

But it's not usually a good idea. A key event may fire for other reasons, such as the user picking an entry from a keyboard IME.

What you are really trying to do is emulate the behaviour of the Enter key submitting a form. So do it by actually creating a form, putting the input in it, and picking up the submit event on the form. You can then be sure you're only getting Enter presses that were intended as a submission, and not have to worry about other Enter presses (or shift-Enter or anything like that), and any device that can fill in forms but doesn't have a normal Enter button will still be able to use the page.

<form id="lookup-form">
    <input id="lookup-field"/>
</form>

document.getElementById('lookup-form').onsubmit= function() {
    get(document.getElementById('lookup-field').value);
    return false;
};

(If you're feeling properly conscientious, you can make it a rel form with an action pointing at a server-side script that does the lookup, so that the functionality works for user-agents without JavaScript.)

Upvotes: 1

Miles
Miles

Reputation: 1437

You are looking for jQuery's change event.

$('#TextBox').change(function(e) {
    doSomethingWithString( this.val() );
})

The suggestions regarding keydown and finding the enter key are also valid.

Upvotes: -1

Will
Will

Reputation: 20235

You have to use the key code on the event object. For enter, it is 13, so you check for 13.

<input type="text" id="MyInput" />

document.getElementById("MyInput").addEventListener( "keydown", function( e ) {
    var keyCode = e.keyCode || e.which;
    if ( keyCode === 13 ) {
       // enter pressed
       get();
    }
}, false);

Upvotes: 1

NobRuked
NobRuked

Reputation: 593

Assuming you're using the jQuery JavaScript framework, the following code should work:

$('#my_text_box').keypress(function(e) {
    if (e.which == 13) {
        get();
    }
});

13 is the key code for Enter.

Ideally, the code should be a part of your document.ready setup.

Upvotes: 0

Quentin
Quentin

Reputation: 943564

Basically:

  1. Listen for a keydown, keyup or keypress event
  2. The event object will include the keycode, test that it is the enter key
  3. Call the function

Due to differences in how browsers handle event binding and keycodes, you are almost certainly best off using a library for this. For example, with YUI 3 and its key-event module:

Y.one('#id_of_my_input').on('key', get, 'press:enter');

Upvotes: 0

Related Questions