When editing a text input, how do I do a specific JavaScript action on hitting "Enter" key without the form's onSubmit handler?_问答_开发者

When editing a text input, how do I do a specific JavaScript action on hitting "Enter" key without the form's onSubmit handler?

开发者 https://www.devze.com 2022-12-09 09:15 出处：网络

I have an HTML input text field. How can I perform a specific JavaScript call when hitting \"Enter\" button while editing that field? Currently, hitting \"开发者_JS百科Enter\" reloads the entire pag

I have an HTML input text field.

How can I perform a specific JavaScript call when hitting "Enter" button while editing that field? Currently, hitting "开发者_JS百科Enter" reloads the entire page, presumably due to submitting the entire form.

NOTE: This HTML/JS code is merely included as a portlet into a large HTML page for a portal, which has one large master form wrapped all the way around my code. Therefore I can not control the form - can't change onSubmit event or action or wrap my INPUT field into a smaller form - otherwise the solution would be obvious :)

Also, a solution that does not involve adding a visible button to the form is strongly preferable (I don't mind adding a button with display:hidden if that's what it takes, but my attempt to do so didn't seem to work).

This needs to be straight up JS - no Query/Prototype/YUI is available.

P.S. it's a search field and the action will be a call to an existing in-page JavaScript search method, if someone's curious.

Thanks!

Assuming you have a text input something like

<input id="myTextBox" name="foo" value="bar">

... you could do something like this, after the document has loaded, and it will work in all mainstream browsers:

document.getElementById("myTextBox").onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    if (charCode == 13) {
        // Suppress default action of the keypress
        if (evt.preventDefault) {
            evt.preventDefault();
        }
        evt.returnValue = false;

        // Do stuff here
    }
};

Include the following javascript

<script type="text/javascript">
function noenter() {
    return !(window.event && window.event.keyCode == 13); 
}
</script>

Add the following attribute into the input element that you wish to prevent the submit

onkeypress="return noenter()"

Of course you can perform some other event if you wish...

Would you be better off using the document object to detect the Enter action? That way you need make no changes to the HTML form tags. You can assign the search function to the button, although if it's hidden I am not sure how the user would click on it, or you could use something like onblur to capture the user tabbing out of the input control.

Try adding an attribute "action=javascript:void(0)" as in the example below.

Enter will trigger the same action as clicking on the submit button, but won't reload the page automatically.

<html>
<head></head>
<body>
    <div id="status"></div>
    <form action="javascript:void(0)">
        <input type="text" />
        <input type="submit" value="submit" onclick="document.getElementById('status').innerHTML = 'submitted';"/>
    </form>
    <script>document.getElementById('status').innerHTML = 'page loaded';</script>
</body>
</html>