Home php教程 PHP开发 How to implement the Form form to automatically submit the form by pressing Enter

How to implement the Form form to automatically submit the form by pressing Enter

Dec 06, 2016 pm 02:50 PM
form

1. There is only one input tag in the form. Pressing the Enter key will automatically submit the form.

When there is only one in the form, pressing the Enter key will Automatically submit the form.

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>
<input type=&#39;text&#39; name=&#39;name&#39; />
</form>
Copy after login

If you don’t want it to be automatically submitted, you can do this:

Add another pressing Enter will not automatically submit, but an unknown message will be displayed on the page Yun's input box is quite awkward, so I found two solutions from the Internet:

(1) Add an do not display the input box, and then press Enter It will not be submitted later:

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>
<input type=&#39;text&#39; name=&#39;name&#39; />
<input style=&#39;display:none&#39; />
</form>
Copy after login

(2) Add an onkeydown event, and then press Enter and it will not be displayed:

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown=&#39;if(event.keyCode==13) return false;&#39;/>
</form>
Copy after login

ps: I have no idea about this event.keyCode==13 I understand, I just understand it as a judgment condition, but I still don’t understand the details. If you understand, please feel free to enlighten me.

If you want to add a carriage return event, you can add a judgment submission form in the onkeydown event:

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>
<input style=&#39;display:none&#39; />
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown=&#39;if(event.keyCode==13){gosubmit();}&#39; />
</form>
Copy after login

2. Regarding whether automatic submission is needed

We sometimes want to press the Enter key in the text box (input element) to submit the form (form), but sometimes we don’t want this. For example, for search behavior, you want to directly press the Enter key to submit the form immediately after entering the keywords. For some complex forms, you may want to avoid accidentally pressing the Enter key to trigger the form submission before completing the form filling.

To control these behaviors, there is no need to resort to JS. The browser has already done this for us. Here are a few rules:

If there is a button with type="submit" in the form, the Enter key will take effect.

If there is only one input with type="text" in the form, no matter what type the button is, the Enter key will take effect.

If the button is not input, but button, and no type is added, the default is type=button in IE and type=submit in FX.

Other form elements such as textarea and select will not be affected. Radio checkbox will not affect the triggering rules, but it will respond to the enter key under FX but not under IE.

The input of type="image" has the same effect as type="submit". I don't know why such a type is designed. It is not recommended. It should be more appropriate to use CSS to add a background image.


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)