首頁 > web前端 > js教程 > jquery頁面焦點動態使用

jquery頁面焦點動態使用

php中世界最好的语言
發布: 2018-04-26 14:05:19
原創
1647 人瀏覽過

這次帶給大家jquery頁面焦點動態使用,jquery頁面焦點動態使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

使用者在輸入文字時,如果能高亮顯示正在輸入的那個文字方塊的話,會更人性化些,下面就使用jQuery來實現。
實作原理:
document載入完成後(ready),加入input的focus和blur事件,並進行增加和刪除樣式的操作。
程式碼範例:

<html> 
<head>
<title>焦点</title> 
<style type="text/css">
.redBack{}{ 
color:white; 
background:red; 
border:2px solid black; 
} 
</style> 
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$(&#39;input&#39;).focus(function(){ 
$(this).addClass(&#39;redBack&#39;); 
//alert("hello"); 
}); 
$(&#39;input&#39;).blur(function(){ 
$(this).removeClass(&#39;redBack&#39;); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" value="hello,shanzhu" id="myText"> 
<input type="text" value="hello,shanzhu" id="myText2"> 
<input type="text" value="hello,shanzhu" id="myText3"> 
<input type="text" value="hello,shanzhu" id="myText4"> 
<input type="text" value="hello,shanzhu" id="myText5"> 
<input type="text" value="hello,shanzhu" id="myText6"> 
</body> 
</html>
登入後複製

根據測試的要求,在alert之後,要將遊標定位到指定的位置。查閱之後發現:focus屬性可以方便的做到。

alert("姓名不能为空!"); 
//由id定位到需要的焦点 
$("#name").focus();
登入後複製

即在提示輸出後,焦點回到輸入項目。類似的也可以加入對應的樣式。能高亮顯示正在輸入的那個文字方塊的話,會更人性化些,下面就使用jQuery來實現。
在document載入完成後(ready),加入input的focus和blur事件,並進行增加和刪除樣式的操作。

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

jquery實作指定文字方塊只能輸入數字

Jquery Mobile自訂按鈕圖示步驟詳解

#

以上是jquery頁面焦點動態使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板