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


Posted in Javascript onSeptember 10, 2010

功能实现:
用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
有趣的javascript数组定义方法
Sep 10 #Javascript
心扬JS分页函数代码
Sep 10 #Javascript
JavaScript中获取元素索引的函数
Sep 10 #Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 #Javascript
一些常用且实用的原生JavaScript函数
Sep 08 #Javascript
js location.replace与location.reload的区别
Sep 08 #Javascript
js中匿名函数的N种写法
Sep 08 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
php对象工厂类完整示例
2018/08/09 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
js单例模式详解实例
2013/11/21 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
实用的简历自我评价
2014/03/06 职场文书
外贸业务员求职信
2014/06/16 职场文书
童年读书笔记
2015/06/26 职场文书