JavaScript to implement page load when setting input button focus

Last Update:2017-01-13 Source: Internet

Author: User

Tags current time sleep

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the electronic business of recharge, payment and other actions; After the user confirms the order, executes the submission action, we call this page "the Order submits the page", the order opens a new page jumps to the payment platform to carry on the processing of the order, this page is "the Payment Platform Processing page", but the order Submission page displays a mask layer, Prompts the user to complete the order on a new page with the two buttons "completed payment" and "Payment problem".

Prototype Picture XX

And now I'm just going to implement one of these business processes. After the entire business process is completed, the use of Firefox to test recharge, and so on, all good (of course, the architecture, and development are not so fast and easy, detailed can write another article). After the completion of internal testing, using a variety of browsers, firefox,chrome,ie,360 and other browsers to operate. Colleague Y Reminder in the use of IE to purchase, the business is not particularly big problem, but is in the confirmation Order submission action, form new page open, browser focus on the "Payment Platform processing page" above, but then "Payment Platform processing page" Suddenly minimized lost browser focus , and the browser focus returns to the pop-up layer of the order submission page again.

Obviously the function is not affected can be used normally, but for the user experience is not good, the user completes the order submission, the browser focus should be directly on the "Payment Platform Processing page", the user can directly carry out payment platform processing operations. Now the user has to tap the Payment Platform processing page again to regain the focus of the browser.

You can only check the code again, and this process uses very simple and primitive logic. The following code can be directly in the IE8 and the browser below (browser new open page must be in the form of a new window, if the new tab open the page is not the problem) open the Click submit button to appear this problem.

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>input test</title>

. loginform {width:400px; height:200px border:1px solid #ccc; margin:0 Auto;}
. message {width:400px; height:160px; border:2px solid #ccc;  display:none; background: #fff;}
. message. i{width:80px; height:20px margin:10px; display:block; border:1px solid #ccc;
h4 {Text-align:center;}
</style>

<body>

</div>

$ (document). Ready (function () {

$ (' #go '). Click (function () {

$.blockui ({
Message: $ ("#message"),
Timeout:false,
Onunblock:false,
CSS: {
Top: ' 20% ',
Left: ($ (window). Width ()-400)/2,
Cursor: ' pointer ',
Margin: ' 0 auto ',
Background: ' None ',
border: ' None '}
});
$ ('. Blockui '). attr (' title ', ' click Close '). Click ($.unblockui);
$ (' #goform '). Submit ();
});
});
</script>

</body>

The action of the Order form submission is mainly caused by

The code is as follows

Copy Code

$ (' #go '). Click (function () {
Mask Handling

Form submission
$ (' #goform '). Submit ();
});

Such code is done, to JS the first execution process. The mask is processed first and then the submit action for the form order is performed. There should be nothing wrong with ruminating, but still.

Then you start to think about delaying execution of form form submissions, which means that after the action of the mask is completed, it executes in a few seconds.

The code is as follows	Copy Code
settimeout (function () {$ (' #goform '). Submit (); }, 10);

Again, the pop-up layer executes normally, but the pop-up of the new page is blocked by the IE prompt security warning. Because IE does not think that the submission of the form is a manual operation of the user, it is even more undesirable to have the user add the station to the list of new pages that are allowed to pop up.

Then start thinking about implementing the browser's sleep, which is to suspend the current thread; But the core implementation of sleep is to loop through other code or specify a time. If time is up, jump out

The code is as follows	Copy Code
<script type= "Text/javascript" > function sleep (milliseconds) { var starttime = new Date (). GetTime (); Get the current time while (new Date (). GetTime () < StartTime + milliseconds); Hog CPU } </script>

However, the code above does not allow the script interpreter to sleep, and it has the effect of getting the CPU up and down to high load. The browser may even be in suspended animation for that period of time. not be taken.

Puzzled for a long time still do not know why, so had to consult Daniel colleague W. After a brief description of the problem, W read the code to show that in order to execute is completely no problem, but also into my previous thinking, using settimeout, change the logic of action. Also does not work, the last W notice the content of the pop-up layer, see there are two input tags, so it is directly to a label. Try again really good, W said input will automatically get focus, and a tag will not.

After replacing input with a label, this does not occur. This is why. When you select a different label for a page with a table, the page label gets the focus correctly. What is the focus acquisition principle for a and input when browsers load Web pages?

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More