Home > Web Front-end > JS Tutorial > How different browsers handle carriage return submission forms_javascript skills

How different browsers handle carriage return submission forms_javascript skills

WBOY
Release: 2016-05-16 18:34:40
Original
1162 people have browsed it

The conditions are:
Under IE and Firefox
1. The "action" field of the

attribute is required;
2. There is an "input" of type="submit" ".
Under Chrome and Safari
Just satisfy the first condition. (Note 1)
Therefore, if you want to control the submission behavior (for example, check whether the required fields have been filled in before submitting), you can add Javascript "onXXX (such as onClick)" after the "input" of type="submit" event. If you need to use asynchronous interaction to detect related fields, it will be invalid. Because return false is a sub-function of onreadystate=, it does not control the global situation. At this time, you need to use the "onsubmit" attribute of (Note 2). For example:
HTML

Copy code The code is as follows:



myfn() is a self-defined function: No matter how you submit (such as hitting "enter" or clicking the "input" button with type="submit" (instead of type="button")), this function will be triggered. Therefore, there is no need to add the Javascript event "onXXX" after the "input" of type="submit". Directly controlling in "onsubmit" is more intuitive and unified, unless you intend to control the submission method (onClick or something).
return false at the end means not to submit this form. The statement document.form1.submit() that submits the form can be used as a branch of the selection condition of myfn().

Summary:
In this way, has "action" and "onsubmit" attributes, and has an "input" submit button of type="submit". Under any browser (not possible? Please give me feedback), you can use the "Enter" key and the mouse to check and submit the relevant fields of the form asynchronously (Ajax) and synchronously (plain Javascript).
Others:
1. What if type="button" is used to asynchronously detect related fields?
In this way, this "input" must have an event trigger. Under IE and FF, you cannot directly press "Enter" in the text box to submit the form. If necessary, you need to use additional functions to monitor what the user presses and give a response (Note 3). What's worse is that under Ch and Sa, whether there is a type="submit" button will be ignored, and the form will be submitted directly based on the "action" attribute. In this way, the expected detection cannot be achieved, and there may be more troublesome consequences. .
2. What if you don’t write the “action” attribute and directly submit the form asynchronously?
In this way, submitting the form asynchronously instead of just detecting it, this attribute is not necessary. And it’s still redundant. If this can provide a better user experience, why not? hehe.
【Comments】
1 Tested in IE8, FF, Ch and valid. Opera and Sa have not been tested.
Copy code The code is as follows:

Chrome will trigger submission of the form by hitting the Enter key in the form
A login port can be redirected after hitting Enter under IE or Firefox and using js to pass ajax verification successfully. Several input boxes are written in a form. When the user enters the user password, ajax is triggered for judgment. At this time Neither IE nor Firefox will submit the form, and there is no submit in the form. Chorm and Safari will submit all forms entered at this time.

If you use ajax in the future, remember not to write it in the form.

2 This article
Copy the code The code is as follows:

Avoid the Enter key to submit the form on the Chrome browser
I posted a post on the forum before, asking:

"On the Chrome browser
I can change the Enter key or make it invalid. " The problem has no solution in the end

The problem was caused to avoid pressing Enter to submit the form. Now the problem has been solved. It is actually very simple. I only blame myself for not thinking of

in the Form Manipulate the submission event:

onsubmit="MySubmit();return false;"

MySubmit() can be used to make judgments when submitting. For example, you can use another hidden The form completes customized submission tasks.

This problem is a bit confusing, but changing the Enter event on Chrome is not easy. Anyone with knowledge would like to inform you.

3 Refer to previous articles
Obtain KeyCode in IE and FF at the same time
I used to test the website in IE8, but then a part of the code containing Ajax malfunctioned and I had to download it. Firefox and its plug-in Firebug discovered that FF does not support the windows.event event. So I changed my mind.
HTML

Javascript
Copy code The code is as follows:

function submit1(e){
var isie = (document.all) ? true : false; //Determine whether it is IE kernel or Mozilla
var key;
if (isie)
key = window.event.keyCode;//IE uses windows.event event
else
{
key = e.which;//The three key functions have a default hidden variable, which is passed here with e. e.which gives an index value to the Mo kernel (note 1)
}
if(key==13)
send1('loginemail','loginpsw');//The triggered event can Customized
}
Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template