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>
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>
- What are you trying? You need to bind to the keydown event using javascript and then grab the input value using getElementByID. If you are using jQuery, this is really easy. – d_ethier Commented Aug 28, 2011 at 21:40
7 Answers
Reset to default 1You 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);
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.)
Basically:
- Listen for a
keydown,keyuporkeypressevent - The event object will include the keycode, test that it is the enter key
- 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');
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.
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.
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"/>
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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744915077a4600784.html
评论列表（0条）