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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
layui文件上传实现代码
May 20 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
vue 设置路由的登录权限的方法
Jul 03 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
webpack5 联邦模块介绍详解
Jul 08 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
第九节 绑定 [9]
2006/10/09 PHP
用文本文件制作留言板提示(上)
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php类常量用法实例分析
2015/07/09 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
php实现session共享的实例方法
2019/09/19 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
python根据路径导入模块的方法
2014/09/30 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python 如何引入协程和原理分析
2020/11/30 Python
python爬取微博评论的实例讲解
2021/01/15 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
小学毕业感言300字
2014/02/19 职场文书
保密工作责任书
2014/04/16 职场文书
世界读书日的活动方案
2014/08/20 职场文书