DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript組件焦點與頁內錨點間傳值的方法教程
JavaScript組件焦點與頁內錨點間傳值的方法教程
編輯:關於JavaScript     

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

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

如何光標放上輸入框就觸發事件,離開輸入框就觸發另一個事件呢?即使用戶不輸入任何東西……

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

一、基本目標

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

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

1、輸入框功能

一旦把光標放上對話框背景就變成紅色,一旦用戶的鼠標點擊其他地方則重新變為灰色的背景

2、超級鏈接功能

向頁面下方的bottom錨點通過get方法傳遞值text=1的值,bottom錨點下面有個已被禁用的輸入框,不停在輪詢地址欄上面的text參數

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

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

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

請注意頁內錨點間成功傳值時,浏覽器的url:

二、制作過程

不用引入任何插件,直接開個html頁面來寫就可以了,請看下面的代碼:

代碼如下:<!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> 
<!--定義個輸入框,onfocus是獲得焦點,一旦把光標放上輸入框則馬上觸發getFocus()參數。onblur則是失去焦點,也onfocus剛好反過來。--> 
<p> 
<input type="text" onfocus="getFocus()"  onblur="loseFocus()"/> 
</p> 
 
<!--注意頁內錨點傳遞參數的超級鏈接的語法,寫用?接參數,再用#接錨點,多個參數則寫成?texta=1&textb=2#bottom,用&鏈接--> 
<p> 
<a href="onfocus.html?text=1#bottom">錨點</a> 
</p> 
 
<!--這麼多的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> 
 
<!--此超級鏈接相當於後退按鈕--> 
<p> 
<a id="bottom" href="javascript:history.go(-1);">back</a> 
</p> 
 
<!--我就是那個被禁用的對話框--> 
<p> 
<input type="text" id="pollingtext" disabled="disabled"/> 
</p> 
 
</body> 
</html> 
<script> 
    /*一開始先把頁面的背景顏色換成#eeeeee*/ 
    window.onload=function(){ 
        document.bgColor="#eeeeee"; 
        Polling(); 
        } 
     
    /*當對話框獲得焦點就把背景顏色改成紅色,反之則重新改成#eeeeee*/    
    function getFocus(){ 
        document.bgColor="#ff0000"; 
    } 
     
    function loseFocus(){ 
        document.bgColor="#eeeeee"; 
    } 
     
    /*這是取url get傳值時的參數的專用正則表達式*/ 
    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;  
    } 
     
    /*不停地輪詢,檢查是否有get參數傳遞過來了*/ 
    function synchronous() { 
        document.getElementById("pollingtext").value =getUrlParam("text"); 
    } 
     
    function Polling(){ 
        synchronous(); 
        setInterval("synchronous()", 500); 
    } 
</script>

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved