This article describes the method of passing values between the focus of JavaScript components and intra-page anchor points. Share it for your reference. The specific analysis is as follows:
The two small functions mentioned above are very useful on some new mobile phone pages.
How to trigger an event when the cursor is placed on the input box, and trigger another event when the cursor is placed on the input box? Even if the user does not enter anything...
It is simple to pass values between pages, but how to pass values between anchors within the page?
1. Basic Objectives
There is a page with an input box and a hyperlink on it. These two things have no connection.
It's just that because the function is not big, I write the two functions together
1. Input box function
Once the cursor is placed on the dialog box, the background turns red, and once the user's mouse clicks elsewhere, it turns gray again.
2. Hyperlink function
Pass the value of text=1 to the bottom anchor point at the bottom below the page through the get method. There is a disabled input box below the bottom anchor point, and the text parameter on the polling address bar is constantly
Start If you don't click, there is no text parameter, so the input box is always displayed as null
Once the hyperlink is clicked, the dialog box below becomes 1 after 0.5 seconds. Since it is processed in milliseconds, the user's feeling is processed in real time.
There is also a back hyperlink above this disabled. Clear the page parameters and pull the scrollbar down again and display it as null again.
Please note that when the value is successfully transmitted between anchors in the page, the browser's url:
2. Production process
No need to introduce any plug-ins, just open an html page to write. Please see the following code:
Copy the code 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>
<!--Define an input box. Onfocus is to get focus. Once the cursor is placed on the input box, the getFocus() parameter will be triggered immediately. Onblur loses focus, and onfocus just turns the other way around. -->
<p>
<input type="text" onfocus="getFocus()" onblur="loseFocus()"/>
</p>
<!--Note the syntax of the hyperlinks for parameters passed by anchor points in the page. Use "connect parameters" and then use #connect anchor points. For multiple parameters, write them as "texta=1&textb=2#bottom, use "&link-->
<p>
<a href="onfocus.html?text=1#bottom">Anchors</a>
</p>
<!--So many lis are just used to occupy the line~ In order to let everyone see the anchor effect-->
<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><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 am the disabled dialog box-->
<p>
<input type="text" id="pollingtext" disabled="disabled"/>
</p>
</body>
</html>
<script>
/*First change the background color of the page to #eeeeeee*/
window.onload=function(){
document.bgColor="#eeeeee";
Polling();
}
/* When the dialog box gets focus, change the background color to red, otherwise change it to #eeeeee*/
function getFocus(){
document.bgColor="#ff0000";
}
function loseFocus(){
document.bgColor="#eeeeee";
}
/*This is a dedicated regular expression for the parameters when taking url get passed values*/
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;
}
/*Police constantly to 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 be helpful to everyone's JavaScript programming.