十年網(wǎng)站開發(fā)經(jīng)驗 + 多家企業(yè)客戶 + 靠譜的建站團隊
量身定制 + 運營維護+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
javascript通過 onFocus onBlur來判斷焦點和失去焦點
創(chuàng)新互聯(lián)企業(yè)建站,10多年網(wǎng)站建設經(jīng)驗,專注于網(wǎng)站建設技術,精于網(wǎng)頁設計,有多年建站和網(wǎng)站代運營經(jīng)驗,設計師為客戶打造網(wǎng)絡企業(yè)風格,提供周到的建站售前咨詢和貼心的售后服務。對于成都網(wǎng)站制作、網(wǎng)站設計、外貿網(wǎng)站建設中不同領域進行深入了解和探索,創(chuàng)新互聯(lián)在網(wǎng)站建設中充分了解客戶行業(yè)的需求,以靈動的思維在網(wǎng)頁中充分展現(xiàn),通過對客戶行業(yè)精準市場調研,為客戶提供的解決方案。
input type="text" id="p" onBlur="alert('lose focus!')"
onFocus="alert('get focus')" /
jquery $("#p").blur(); $("#p").blur(fn)
或$("#p").focus(); 或$("#p").focus(fn)來處理焦點事件
前者:$("#p").blur();$("#p").focus(); 用來強制獲取或失去焦點
后者:$("#p").blur(fn),$("#p").focus(fn)則類似js的onBlur和onFocus用以處理焦點移出和獲取時事件處理!
輸入框失去焦點后,你又給它賦予焦點,并且彈出對話框,你再點擊取消,輸入框又失去焦點,然后它又被賦予焦點.....這就是個死循環(huán),所以這個alert會循環(huán)出現(xiàn)。
DIV獲取焦點(兩種方法):
DIV直接使用focus()和blur()兩個方法是無效的,需添加tabindex="0"或者contenteditable="true"屬性
①:設置div為可編輯狀態(tài),則可點擊獲取焦點,同時div的內容也是可以編輯的;如:
div
contenteditable="true"11111111111111/div
②:設置div的tabindex,此時div的內容是不可編輯的;如:
div
tabindex="0"11111111111111/div
PS:設置tabindex屬性,按鍵盤Tab鍵可讓其獲取焦點,其中tabindex的值越小在tab鍵切換的時候就會首先聚焦
在可編輯的DIV里,加上blur事件,就是當失去焦點時,獲取失去焦點的DIV的ID,然后保存到全局變量里,這樣你在做添加圖片時,可以直接讀取這個全局變量來獲取最后是哪個DIV失去了焦點。
用jquery的話,一句代碼就能為所有的DIV添加上失去焦點事件:
$("div").on("blur",function(){
var?id=$(this).prop("id");
});;
上面是為所有的DIV綁定了事件,但你可以在實際中,根據(jù)自己的需要來“縮小范圍”,比如你要監(jiān)聽的只是其中包含“edit”樣式的DIV,改成:
$("div.edit").on("blur",function(){
var?id=$(this).prop("id");
});
你要插入圖片的話,要不要記錄光標所在的位置?
DIV獲取焦點有兩種方法:
DIV直接使用focus()和blur()兩個方法是無效的,需添加tabindex="0contenteditable="true"屬性,設置div為可編輯狀態(tài),則可點擊獲取焦點,同時div的內容也是可以編輯的,
設置div的tabindex,此時div的內容是不可編輯的。
PS:設置tabindex屬性,按鍵盤Tab鍵可讓其獲取焦點,其中tabindex的值越小在tab鍵切換的時候就會首先聚焦