javascript - Stop newline submitting a form? - Stack Overflow

admin管理员组

文章数量:1278980

I have a slightly unusual form-related problem. My web app listens for scanner input from a barcode reader. The barcode reader presents as keyboard input in the following format:

~100.0101~\n

where \n is a newline. I use a global javascript listener with a regex - whenever the listener 'hears' input that matches the regex, I call my barcodeHandler() function.

Unfortunately, this doesn't interact well with forms: if the user is focussed on a form input when they scan, the form is submitted and posts back before the listener kicks in, because the form takes \n to mean 'submit'.

I can't change the scanner input, so is there any way I can stop the forms submitting when the \n is entered?

Obviously, I'd still like my forms to work with the Enter key, and I'd rather not change the default form behaviour if possible!

many thanks!

I have a slightly unusual form-related problem. My web app listens for scanner input from a barcode reader. The barcode reader presents as keyboard input in the following format:

~100.0101~\n

where \n is a newline. I use a global javascript listener with a regex - whenever the listener 'hears' input that matches the regex, I call my barcodeHandler() function.

Unfortunately, this doesn't interact well with forms: if the user is focussed on a form input when they scan, the form is submitted and posts back before the listener kicks in, because the form takes \n to mean 'submit'.

I can't change the scanner input, so is there any way I can stop the forms submitting when the \n is entered?

Obviously, I'd still like my forms to work with the Enter key, and I'd rather not change the default form behaviour if possible!

many thanks!

• javascript
• html
• forms
• browser

Share Improve this question Follow asked Apr 4, 2011 at 12:46 AP257AP257 94k8989 gold badges207207 silver badges263263 bronze badges 4

• 1 you can use jquery and assign a special function on key actions and do event.preventdefault(); to prevent the "enter" key from being processed as a submit of the form. – ITroubs Commented Apr 4, 2011 at 12:49
• Thanks - though I'd really like the Enter key still to work - just not the \n supplied by the barcode scanner. Is there a way to distinguish between the two? – AP257 Commented Apr 4, 2011 at 13:03
• Ah, I can just apply the event listener when the first part of the regex has been matched. That works. – AP257 Commented Apr 4, 2011 at 13:24
• FYI: a < textarea > will not submit forms with the newline ( \n ) from a barcode readers input. – user891901 Commented Aug 12, 2011 at 14:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You need to capture the keypress on form controls and prevent the default action using preventDefault() or return false.

// do this for all <input> <textarea> and <select> elements on the page.
input.addEventListener("keypress", function(event){
    if (event.which == '10' || event.which == '13') {
        event.preventDefault();
    }
}, false);

or using jQuery:

$("input, textarea, select").keypress(function(event){
    if (event.which == '10' || event.which == '13') {
        event.preventDefault();
    }
});

Override the form's onsubmit and supply your own alternative as an onclick handler on the submit button.

<form action="submit.php" onsubmit="return false;">
    Some input ...<input type="text"/>
    <input type="button" value="Submit" onclick="parentNode.submit();">
</form>

本文标签： javascriptStop newline submitting a formStack Overflow