DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery關於頁面焦點的定位(文本框獲取焦點時改變樣式 )
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事件,並進行增加和刪除樣式的操作。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved