jquery頁面焦點動態使用
- php中世界最好的语言原創
- 2018-04-26 14:05:191624瀏覽
這次帶給大家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(){
$('input').focus(function(){
$(this).addClass('redBack');
//alert("hello");
});
$('input').blur(function(){
$(this).removeClass('redBack');
});
});
</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頁面焦點動態使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn