JavaScript元件焦點與頁內錨點間傳值的方法_javascript技巧

本文實例講述了JavaScript元件焦點與頁內錨點間傳值的方法。分享給大家供大家參考。具體分析如下：

上述的這兩個小功能在一些新式的手機頁面是很有用的。

如何遊標放上輸入框就觸發事件，離開輸入框就觸發另一個事件呢？即使使用者不輸入任何東西…

頁間傳值很簡單，但在頁內的錨點之間是如何傳值呢？

一、基本目標

有一個頁面，上面有一個輸入框，一個超級鏈接，這兩個東西是沒有任何關聯的，

只是因為功能不大，所以把兩個功能合起來寫

1、輸入框功能

一旦把遊標放上對話框背景就變成紅色，一旦使用者的滑鼠點擊其他地方則重新變成灰色的背景

2、超級連結功能

往頁下方的bottom錨點透過get方法傳遞值text=1的值，bottom錨點下方有個已停用的輸入框，不停在輪詢網址列上面的text參數

開始如果不點擊，則沒有text參數，所以輸入框一直顯示為null

一旦點擊超級鏈接，下面的對話框在0.5秒之後，變為1，由於是毫秒級處理，所以用戶的感覺是實時處理的，

這個被disabled的上方還有一個back超級鏈接，清空頁面的參數傳遞，再次把滾動條拉下來則又是顯示為null。

請注意頁內錨點間成功傳值時，瀏覽器的url：

二、製作過程

不用引入任何插件，直接開個html頁面來寫就可以了，請看下面的程式碼：

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
 
 

 
 

 
 

 
錨點 

 
 
 

 
 
 

 
back 

 
 
 

 
 

 
 
 
 
<script>  <br />     /*一開始先把頁面的背景顏色換成#eeeeee*/  <br />     window.onload=function(){  <br />         document.bgColor="#eeeeee";  <br />         Polling();  <br />         }  <br />       <br />     /*當對話方塊獲得焦點就把背景顏色改成紅色，反之則重新改成#eeeeee*/     <br />     function getFocus(){  <br />         document.bgColor="#ff0000";  <br />     }  <br />       <br />     function loseFocus(){  <br />         document.bgColor="#eeeeee";  <br />     }  <br />       <br />     /*這是取url get傳值時的參數的專用正規表示式*/  <br />     function getUrlParam(name) {  <br />         var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)");   <br />         var r = window.location.search.substr(1).match(reg);    <br />         if (r!=null) return unescape(r[2]); return null;   <br />     }  <br />       <br />     /*不停地輪詢，檢查是否有get參數傳遞過來了*/  <br />     function synchronous() {  <br />         document.getElementById("pollingtext").value =getUrlParam("text");  <br />     }  <br />       <br />     function Polling(){  <br />         synchronous();  <br />         setInterval("synchronous()", 500);  <br />     }  <br /> </script>

希望本文所述對大家的javascript程式設計有所幫助。