Home > Developer > JavaScript
The method for transferring values between the JavaScript component focus and the page anchor.
This article describes how to transfer values between the JavaScript component focus and the page anchor. Share it with you for your reference. The specific analysis is as follows:
These two small functions are useful in some new mobile phone pages.
How can I trigger an event when I put the cursor in the input box and trigger another event when I leave the input box? Even if the user does not input anything ......
It is easy to pass values between pages, but how does one pass values between the page's anchor points?
I. Basic Objectives
There is a page with an input box and a hyperlink. These two items are not associated,
Because the function is not big, write the two functions together
1. input box function
Once the cursor is placed on the background of the dialog box, the background turns red. Once the user clicks somewhere else, the background turns gray again.
2. hyperlink
Pass the value of text = 1 to the bottom anchor at the bottom of the page through the get method. The bottom anchor has a disabled input box that keeps polling the text parameter on the address bar.
If you do not click it at the beginning, there is no text parameter, so the input box is always displayed as null
Once you click the hyperlink, the dialog box below will change to 1 after 0.5 seconds. As it is processed in milliseconds, the user feels that it is processed in real time,
There is a back hyperlink at the top of the disabled. The parameters of the cleared page are passed. If the scroll bar is pulled down again, it is displayed as null.
Note that the url of the browser is:
Ii. Production Process
You don't need to introduce any plug-ins. You just need to open an html page to write it. Please refer to the following code:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> onfoucs </title>
</Head>
<Body>
<! -- Defines an input box. onfocus is used to obtain the focus. Once the cursor is placed in the input box, the getFocus () parameter is triggered immediately. Onblur loses focus, and onfocus is the opposite. -->
<P>
<Input type = "text" onfocus = "getFocus ()" onblur = "loseFocus ()"/>
</P>
<! -- Pay attention to the hyperlink syntax for passing parameters in the page anchor. Is it used for writing? Connect the parameter, and then use # to connect to the anchor. Write multiple parameters? Texta = 1 & textb = 2 # bottom, use & link -->
<P>
<A href = "onfocus.html? Text = 1 # bottom "> anchor </a>
</P>
<! -- So many li resources are used to occupy rows ~ To let everyone see the anchor effect -->
<Li> </ li> </li> <li> </li>
<! -- This hyperlink is equivalent to the back button -->
<P>
<A id = "bottom" href = "javascript: history. go (-1);"> back </a>
</P>
<! -- I am the disabled dialog box -->
<P>
<Input type = "text" id = "pollingtext" disabled = "disabled"/>
</P>
</Body>
</Html>
<Script>
/* Change the background color of the page to # eeeeee */
Window. onload = function (){
Document. bgColor = "# eeeeee ";
Polling ();
}
/* When the dialog box gets the focus, change the background color to red, and vice versa, change it to # eeeeee */
Function getFocus (){
Document. bgColor = "# ff0000 ";
}
Function loseFocus (){
Document. bgColor = "# eeeeee ";
}
/* This is the special regular expression of the parameter when the url get value is obtained */
Function getUrlParam (name ){
Var reg = new RegExp ("(^ | &)" + name + "= ([^ &] *) (& | $ )");
Var r = window. location. search. substr (1). match (reg );
If (r! = Null) return unescape (r [2]); return null;
}
/* Keep polling and check whether the get parameter is passed */
Function synchronous (){
Document. getElementById ("pollingtext"). value = getUrlParam ("text ");
}
Function Polling (){
Synchronous ();
SetInterval ("synchronous ()", 500 );
}
</Script>
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
