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事件，并进行增加和删除样式的操作。

　　推荐阅读

　　JavaScript与Div对层定位和移动获得坐标的实现代码

1:移动图层获得点的x轴y轴坐标，从而进行绝对定位(注意：竖拉框会影响 x 轴 y 轴坐标值) 复制代码代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() >>>详细阅读

本文标题：jquery关于页面焦点的定位(文本框获取焦点时改变样式 )

地址：http://www.17bianji.com/kaifa2/JS/25733.html

1/2 1