Clean way to prevent enter button submitting a form

Question

I've seen a lot of Javascript solutions to do this, but I'm sure there must be an easier way.

I have a really simple form - one multiline textbox and a submit button. I want the user to be able to submit "formatted" text (i.e. like an email, with paragraphs, new lines etc)

However, when the user hits Enter to put in a carriage return it submits the form.

I'm there there must be a property or something that controls this, as this must be a common issue. Javascript as a solution seems a bit too complex.

i don't see any problem here, when i hit enter ,it doesn't submit the from, please put some code snippets to clarify what is your question — Anyname Donotcare, Apr 21 '11 at 10:09

score 26 · Accepted Answer · answered Sep 26 '14 at 14:22

26

Set the UseSubmitBehavior property on the submit button to FALSE. (found the solution here)

answered Sep 26 '14 at 14:22

Max

7,408
2
26
32

@Hawkeye, the click event is raised when I click on the button. – The Berga Feb 20 '19 at 16:05
@TheBerga Okay, I just tested this again in a purely asp.net implementation, and I see the same as you say, and in fact, I do not see the OP's issue in that scenario. I personally ran into the issue on a hybrid page, blending Bootstrap and asp.net web forms, which presents certain challenges when targeting a certain design aesthetic. Without going into detail on my situation, `UseSubmitBehavior = False` did not fix my issue. But now after more testing I think my comment is not quite accurate or in that case helpful. I'll remove it. Thanks for prompting me to revisit this! – Hawkeye Feb 20 '19 at 17:24

score 18 · Answer 2 · answered Feb 11 '14 at 19:07

The following code solved my issue:

http://www.itorian.com/2012/07/stop-from-submission-posting-on-enter.html

<script type="text/javascript">
    //Stop Form Submission of Enter Key Press
    function stopRKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
    }
    document.onkeypress = stopRKey;
</script>

Put this in the master page or just in the pages that you want.

score 6 · Answer 3 · answered Feb 25 '19 at 09:39

Use Submit behavior didn't work for me but this

 $(function () {
        $(window).keydown(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });
    })

worked for me

Tim Schmelter · Answer 4 · 2011-04-21T10:09:37.793

6

You could set the DefaultButton on the Form or the Panel surrounding your TextBox to an invisible(display:none) Button. On this way you have full control what happens when user hits enter-key without (browser-dependent) Javascript. If you don't handle its onclick-event, the enter-key will be suppressed.

http://geekswithblogs.net/ranganh/archive/2006/04/12/74951.aspx

edited Apr 21 '11 at 10:09

answered Apr 21 '11 at 10:02

Tim Schmelter

450,073
74
686
939

score 0 · Answer 5 · edited May 23 '17 at 12:18

0

Did u try this? - Enter key in textarea

edited May 23 '17 at 12:18

Community

1
1

answered Apr 21 '11 at 09:55

Mukesh

807
3
10
18

score 0 · Answer 6 · answered Oct 01 '20 at 11:03

Similar to the answer of Max, but showing complete code:

    function EnterKeyFilter() {
        if (window.event.keyCode == 13) {
            event.returnValue = false
            event.cancel = true
        }
    }
    window.addEventListener('keydown', EnterKeyFilter)
</script>

Also similar to other answers, of course, otherwise it wouldn't work, but possibly simpler.

score -1 · Answer 7 · answered Oct 18 '16 at 19:12

-1

In HTML front end just replace body tag with body onkeydown = "return (event.keyCode!=13)

answered Oct 18 '16 at 19:12

Ritadrik Chowdhury

1
1

Clean way to prevent enter button submitting a form

7 Answers7