JavaScript組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值的方法
本文實(shí)例講述了JavaScript組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值的方法。分享給大家供大家參考。具體分析如下：
上述的這兩個(gè)小功能在一些新式的手機(jī)頁(yè)面是很有用的。
如何光標(biāo)放上輸入框就觸發(fā)事件，離開(kāi)輸入框就觸發(fā)另一個(gè)事件呢？即使用戶不輸入任何東西……
頁(yè)間傳值很簡(jiǎn)單，但在頁(yè)內(nèi)的錨點(diǎn)之間是如何傳值呢？
一、基本目標(biāo)
有一個(gè)頁(yè)面，上面有一個(gè)輸入框，一個(gè)超級(jí)鏈接，這兩個(gè)東西是沒(méi)有任何關(guān)聯(lián)的，
只是因?yàn)楣δ懿淮?，所以把兩個(gè)功能合起來(lái)寫
1、輸入框功能
一旦把光標(biāo)放上對(duì)話框背景就變成紅色，一旦用戶的鼠標(biāo)點(diǎn)擊其他地方則重新變?yōu)榛疑谋尘?/p>
2、超級(jí)鏈接功能
向頁(yè)面下方的bottom錨點(diǎn)通過(guò)get方法傳遞值text=1的值，bottom錨點(diǎn)下面有個(gè)已被禁用的輸入框，不停在輪詢地址欄上面的text參數(shù)
開(kāi)始如果不點(diǎn)擊，則沒(méi)有text參數(shù)，所以輸入框一直顯示為null
一旦點(diǎn)擊超級(jí)鏈接，下面的對(duì)話框在0.5秒之后，變?yōu)?，由于是毫秒級(jí)處理，所以用戶的感覺(jué)是實(shí)時(shí)處理的，
這個(gè)被disabled的上方還有一個(gè)back超級(jí)鏈接，清空頁(yè)面的參數(shù)傳遞，再次把滾動(dòng)條拉下來(lái)則又是顯示為null。
請(qǐng)注意頁(yè)內(nèi)錨點(diǎn)間成功傳值時(shí)，瀏覽器的url：
二、制作過(guò)程
不用引入任何插件，直接開(kāi)個(gè)html頁(yè)面來(lái)寫就可以了，請(qǐng)看下面的代碼：
<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>
<!--定義個(gè)輸入框，onfocus是獲得焦點(diǎn)，一旦把光標(biāo)放上輸入框則馬上觸發(fā)getFocus()參數(shù)。onblur則是失去焦點(diǎn)，也onfocus剛好反過(guò)來(lái)。-->
<p>
<input type="text" onfocus="getFocus()" onblur="loseFocus()"/>
</p>
<!--注意頁(yè)內(nèi)錨點(diǎn)傳遞參數(shù)的超級(jí)鏈接的語(yǔ)法，寫用?接參數(shù)，再用#接錨點(diǎn)，多個(gè)參數(shù)則寫成?texta=1&textb=2#bottom，用&鏈接-->
<p>
<a href="onfocus.html?text=1#bottom">錨點(diǎn)</a>
</p>
<!--這么多的li只是用來(lái)占行的~為了讓大家看到錨點(diǎn)效果-->
<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>
<!--此超級(jí)鏈接相當(dāng)于后退按鈕-->
<p>
<a id="bottom" href="javascript:history.go(-1);">back</a>
</p>
<!--我就是那個(gè)被禁用的對(duì)話框-->
<p>
<input type="text" id="pollingtext" disabled="disabled"/>
</p>
</body>
</html>
<script>
/*一開(kāi)始先把頁(yè)面的背景顏色換成#eeeeee*/
window.onload=function(){
document.bgColor="#eeeeee";
Polling();
}
/*當(dāng)對(duì)話框獲得焦點(diǎn)就把背景顏色改成紅色，反之則重新改成#eeeeee*/
function getFocus(){
document.bgColor="#ff0000";
}
function loseFocus(){
document.bgColor="#eeeeee";
}
/*這是取url get傳值時(shí)的參數(shù)的專用正則表達(dá)式*/
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;
}
/*不停地輪詢，檢查是否有g(shù)et參數(shù)傳遞過(guò)來(lái)了*/
function synchronous() {
document.getElementById("pollingtext").value =getUrlParam("text");
}
function Polling(){
synchronous();
setInterval("synchronous()", 500);
}
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家總結(jié)了Bootstrap Table使用心得,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
JS實(shí)現(xiàn)將數(shù)字金額轉(zhuǎn)換為大寫人民幣漢字的方法
這篇文章主要介紹了JS實(shí)現(xiàn)將數(shù)字金額轉(zhuǎn)換為大寫人民幣漢字的方法,涉及javascript字符串與數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
Bootstrap modal 多彈窗之疊加顯示不出彈窗問(wèn)題的解決方案
Bootstrap modal 多彈窗之疊加顯示不出彈窗問(wèn)題，今天小編抽時(shí)間給大家分享下解決方案，需要的朋友參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)縱向輪播圖的初級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
本文將涉及到scroll方法的應(yīng)用，判斷當(dāng)滾動(dòng)條滾到底部時(shí)觸發(fā)scrollTop執(zhí)行函數(shù),具體代碼如下，感興趣的朋友可以了解下哈2013-06-06
解決select2在bootstrap modal中不能正常使用的問(wèn)題
今天小編就為大家分享一篇解決select2在bootstrap modal中不能正常使用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
不使用jquery實(shí)現(xiàn)js打字效果示例分享
js打字效果示例js打字效果示例,data-period設(shè)置從打字返回刪字的時(shí)間，data-rotate可加減中英文詞語(yǔ)，不用jquery支持2014-01-01
使用js獲取超鏈接中keyword的參數(shù)值，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼
下面小編就為大家?guī)?lái)一篇【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。給大家一個(gè)參考2016-03-03
js在瀏覽器中的event loop事件隊(duì)列示例詳解
大家都知道js是單線程的腳本語(yǔ)言,在同一時(shí)間只能做同一件事,為了協(xié)調(diào)事件、用戶交互、腳本、UI渲染和網(wǎng)絡(luò)處理等行為,防止主線程阻塞,Event Loop方案應(yīng)運(yùn)而生,這篇文章主要給大家介紹了關(guān)于js在瀏覽器中的event loop事件隊(duì)列的相關(guān)資料,需要的朋友可以參考下2021-11-11