The example in this article describes the method for the value of JavaScript component focus and page anchor. Share to everyone for your reference. The specific analysis is as follows:
These two small features are useful in some of the newer mobile pages.
How do I trigger an event by placing the input box on the cursor, leaving the input box to trigger another event? Even if the user doesn't enter anything ...
It's easy to pass values between pages, but how do you pass values between anchor points in a page?
I. BASIC OBJECTIVES
There's a page with an input box, a hyperlink, and these two things are not connected,
Just because the function is not big, so put two functions together write
1, the Input box function
Once the cursor is placed in the background of the dialog box red, once the user's mouse clicks other places will be changed to the gray background
2. Super Link function
The bottom anchor at the bottom of the page passes the value text=1 value through the Get method, and there is a disabled input box underneath the bottom anchor point, and the text argument above the polling address bar
Start without clicking, there is no text argument, so the input box always appears null
Once you click on the hyperlink, the following dialog box becomes 1 after 0.5 seconds, so the user's feeling is handled in real time, because it is a millisecond processing.
The top of the disabled also has a back hyperlink that clears the parameters of the page and then pulls the scroll bar down again to show null.
Note The URL of the browser when successful values are passed between the anchor points in the page:
Second, the production process
Do not introduce any plug-ins, directly open an HTML page to write on it, please see the following code:
Copy Code code as follows:
<! 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>onfoucs</title>
<body>
<!--define an input box, onfocus is the focus, and once the cursor is placed on the input box, the GetFocus () parameter is triggered immediately. Onblur is lost focus, also onfocus just in the reverse. -->
<p>
<input type= "text" onfocus= "GetFocus ()" onblur= "Losefocus ()"/>
</p>
<!--Note The syntax of the hyperlink to the anchor point passing parameter in the page, write with the connection parameter, then use the # to connect the anchor point, and the multiple parameters are written? Texta=1&textb=2#bottom & Link-->
<p>
<a href= "Onfocus.html?text=1#bottom" > Anchor points </a>
</p>
<!--so many Li is only used to occupy the line ~ in order to let everyone see the effect of Anchor point-->
<li></li><li></li><li></li><li></li><li></li>< Li></li><li></li><li></li><li></li><li></li><li ></li><li></li><li></li><li></li><li></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'm the one that's been disabled dialog box-->
<p>
<input type= "text" id= "Pollingtext" disabled= "disabled"/>
</p>
</body>
<script>
/* First change the background color of the page to #eeeeee*/
Window.onload=function () {
Document.bgcolor= "#eeeeee";
Polling ();
}
/* When the dialog box gets focus, change the background color to red, and vice versa, change it back to #eeeeee*/
function GetFocus () {
Document.bgcolor= "#ff0000";
}
function Losefocus () {
Document.bgcolor= "#eeeeee";
}
/* This is a special regular expression for the parameter of the URL get pass value.
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, check if there is a get parameter passed over the * *
function Synchronous () {
document.getElementById ("Pollingtext"). Value =geturlparam ("text");
}
function Polling () {
Synchronous ();
SetInterval ("Synchronous ()", 500);
}
</script>
I hope this article will help you with your JavaScript programming.