javascript中如何處理焦點事件

焦點作為javascript中的一個重要功能，基本上和頁面交互都離不開焦點。但卻少有人對焦點管理系統(tǒng)地做總結歸納。本文就javascript中的焦點管理作詳細介紹

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設計、林芝網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1、焦點元素

默認情況下，只有表單元素可以獲得焦點。因為只有表單元素可以交互

input?type="text"?value="223"

讓非表單元素獲得焦點也是有辦法的，先將tabIndex屬性設置為-1，再調用focus()方法

div?id="test"?style="height:30px;width:100px;background:lightgreen"div/div

button?id="btn"div元素獲得焦點/button

script

btn.onclick?=?function(){

test.tabIndex?=?-1;

test.focus();????

}

test.onfocus?=?function(){

this.style.background?=?'pink';

}

/script

2、activeElement

document.activeElement屬性用于管理DOM焦點，保存著當前獲得焦點的元素

注：該屬性IE瀏覽器不支持

div?id="test"?style="height:30px;width:100px;background:lightgreen"div/div

button?id="btn"div元素獲得焦點/button

script

console.log(document.activeElement);//body

btn.onclick?=?function(){

console.log(document.activeElement);//button

test.tabIndex?=?-1;

test.focus();????

console.log(document.activeElement);//div

}

/script

3、獲得焦點

元素獲得焦點的方式有4種，包括頁面加載、用戶輸入(按tab鍵)、focus()方法和autofocus屬性

【1】頁面加載

默認情況下，文檔剛剛加載完成時，document.activeElement中保存的是body元素的引用。文檔加載期間，document.activeElement的值為null

【2】用戶輸入(按tab鍵)

用戶通常可以使用tab鍵移動焦點，使用空格鍵激活焦點。比如，如果焦點在一個鏈接上，此時按一下空格鍵，就會跳轉到該鏈接

說到tab鍵，就不能不提到tabindex屬性。tabindex屬性用來指定當前HTML元素節(jié)點是否被tab鍵遍歷，以及遍歷的優(yōu)先級

1、如果tabindex=-1，tab鍵跳過當前元素

2、如果tabindex=0，表示tab鍵將遍歷當前元素。如果一個元素沒有設置tabindex，默認值就是0

3、如果tabindex大于0，表示tab鍵優(yōu)先遍歷。值越大，就表示優(yōu)先級越小

【3】focus()

focus()方法用于將瀏覽器的焦點設置到表單字段，即激活表單字段，使其可以響應鍵盤事件

注：前面介紹過，若非表單元素，設置為tabIndex為-1，也可以獲取焦點

【4】autofocus

HTML5表單字段新增了autofocus屬性，只要設置這個屬性，不用javascript就能自動把焦點移動到相應字段　

[注意]該屬性只能用于表單元素，普通元素即使設置tabIndex="-1"也不生效

【5】hasFocus()

document.hasFocus()方法返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。通過檢測文檔是否獲得了焦點，可以知道是不是正在與頁面交互

4、失去焦點

如果使用javascript使元素失去焦點，那么就要使用blur()方法

blur()方法的作用是從元素中移走焦點。在調用blur()方法時，并不會把焦點轉移到某個特定的元素上；僅僅是將焦點從調用這個方法的元素上面移走而已

5、焦點事件

焦點事件會在頁面獲得或失去焦點時觸發(fā)。利用這些事件并與document.hasFocus()方法及 document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤

【1】焦點事件共包括下面4個

blur

blur事件在元素失去焦點時觸發(fā)。這個事件不會冒泡

focus

focus事件在元素獲得焦點時觸發(fā)。這個事件不會冒泡

focusin

focusin事件在元素獲得焦點時觸發(fā)。這個事件與focus事件等價，但它冒泡

focusout

focusour事件在元素失去焦點時觸發(fā)。這個事件與blur事件等價，但它冒泡

[注意] 關于focusin和focusout事件，除了IE瀏覽器支持DOM0級事件處理程序，其他瀏覽器都只支持DOM2級事件處理程序

javascript中怎么設置文本框獲得焦點

代碼如下:

input name="pwuser" type="text" id="pwuser" class="input" value="樓盤賬號" onBlur="if(this.value=='') this.value='樓盤賬號';" onFocus="if(this.value=='樓盤賬號') this.value='';" /

input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"

jquery實現(xiàn)方法

對于元素的焦點事件，我們可以使用jQuery的焦點函數(shù)focus(),blur()。

focus()：得到焦點時使用，和javascript中的onfocus使用方法相同。

如：

代碼如下:

$("p").focus(); 或$("p").focus(fn)

blur()：和onblur一樣。

如：

代碼如下:

$("p").blur(); 或$("p").blur(fn)

實例

代碼如下:

form

label for="searchKey" id="lbSearch"搜神馬？/label 這里label覆蓋在文本框上，可以更好的控制樣式

input id="searchKey" type="text" /

input type="submit" value="搜索" /

/form

jquery代碼

代碼如下:

$(function() {

$('#searchKey').focus(function() {

$('#lbSearch').text('');

});

$('#searchKey').blur(function() {

var str = $(this).val();

str = $.trim(str);

if(str == '')

$('#lbSearch').text('搜神馬？');

});

})

javascript中focus()函數(shù)作用

focus是獲得焦點事件。

當一個文本框獲得焦點時，它里面的文本就像“好123”網(wǎng)站上的百度搜索輸入框那樣全部被自動選中，這樣的操作可以利用onfocus來實現(xiàn)。

以下的文本框，當鼠標指針移過去時，里面的文字全部被選中：

請輸入網(wǎng)址

這是怎么做的呢？看以下代碼及解釋：

input type="text"name="url" value="" size="30"onmousemove="this.focus();this.select();"

代碼里，input標簽內嵌入了onmousemove（鼠標指針經過）事件的JS語句，其等號后面的this.focus()意為其自身獲得焦點；獲得焦點的標志是該文本框內將出現(xiàn)輸入光標，但要讓其內的文字全部被選中，我們還得用上this.select()語句，它的意思就是選中全部文本框里的文字。

javascript 焦點問題

你應該在普通div上加onclick(模擬獲取焦點)來實現(xiàn)你的需求。

html

body

input type="test" onfocus='txtfocus()' /

div id='div' style="display:none" 我是焦點DIV/div

div onclick='divFocus()'普通div/div

script language="javascript"

function txtfocus(){

document.getElementById('div').style.display="block";

}

function divFocus(){

document.getElementById('div').style.display="none";

}

/script

/SCRIPT

/body

/html

javascript 怎么樣使控件 獲得焦點

使用.focus()方法來獲得焦點的方法

一般窗口組件都有此方法，如window文本 密碼 按鈕 單選按鈕 復選按鈕 選擇菜單 選擇菜單的子表項 文本區(qū)域 相應的聚焦的事件是 onFocus 代碼 Script functioncheckPassword(testObject) {

if (testObject.value.length 4) {alert("密碼長度不得小于四");

testObject.focus();testObject.select();

文章標題：javascript焦點,javascript焦點圖輪播
網(wǎng)站地址：http://aaarwkj.com/article34/dsiedpe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、網(wǎng)站設計公司、App開發(fā)、網(wǎng)站排名、商城網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)