功能實現:
用戶在輸入文字時,如果能高亮顯示正在輸入的那個文本框的話,會更人性化些,下面就使用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事件,並進行增加和刪除樣式的操作。