Method to transfer value between JavaScript component focus and in-page anchor point_javascript skills

The example in this article describes the method of transferring values ​​between the focus of a JavaScript component and the anchor point on the page. Share it with everyone for your reference. The specific analysis is as follows:

The above two small functions are very useful in some new mobile phone pages.

How to trigger an event when the cursor is placed in the input box, and trigger another event when leaving the input box? Even if the user doesn’t enter anything…

It is very simple to transfer values ​​between pages, but how to transfer values ​​between anchor points within the page?

1. Basic goals

There is a page with an input box and a hyperlink. These two things are not related in any way,

Just because the function is not big, I combined the two functions to write it

1. Input box function

Once the cursor is placed on the dialog box background, it turns red, and once the user clicks the mouse elsewhere, it changes back to gray background

2. Hyperlink function

Pass the value text=1 to the bottom anchor point at the bottom of the page through the get method. There is a disabled input box under the bottom anchor point, which keeps polling the text parameter on the address bar

If you don’t click at the beginning, there will be no text parameter, so the input box will always be displayed as null

Once the hyperlink is clicked, the following dialog box changes to 1 after 0.5 seconds. Since it is processed at the millisecond level, the user's perception is processed in real time,

There is a back hyperlink above the disabled one, which clears the parameter transfer of the page. If you pull down the scroll bar again, it will be displayed as null again.

Please note that when values ​​are successfully transferred between anchor points within the page, the browser’s url:

2. Production process

There is no need to introduce any plug-ins, just open an html page to write. Please see the following code:

< ;/li>

< ;li>

< /li>

back

<script> <br> /*Change the background color of the page to #eeeeee*/ <br> window.onload=function(){ <br> Document.bgColor="#eeeeee"; <br> Polling(); <br>                                                                                                                      <br> /*When the dialog box gets focus, change the background color to red, otherwise change it back to #eeeeee*/ <br> Function getFocus(){ <br>          document.bgColor="#ff0000"; <br> }  <br>        <br> Function loseFocus(){ <br> Document.bgColor="#eeeeee"; <br> }  <br>        <br> /*This is a special regular expression for taking the parameters when url get passes the value*/ <br> Function getUrlParam(name) { <br>            var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)");                                   var r = window.location.search.substr(1).match(reg); If (r!=null) return unescape(r[2]); return null; <br> }  <br>        <br> /*Constantly poll to check if any get parameters have been passed*/ <br> Function synchronous() { <br>          document.getElementById("pollingtext").value =getUrlParam("text"); <br> }  <br>        <br> Function Polling(){ <br>                 synchronous();                     ​ ​ ​ setInterval("synchronous()", 500);  <br> }  <br> </script>


I hope this article will be helpful to everyone’s JavaScript programming design.