JQ实现效果：焦点选中样式

朴灿烈づ我的快乐病毒、 2022-06-12 06:45 236阅读 0赞

1、伪类：focus

<!DOCTYPE html>
    <html>
    <head>
    	<title>Char 5</title>
    	<meta charset="utf-8"/>
    	<style type="text/css">
    	input:focus{
    		border-color: red;
    	}
    		/*.focus{
    			border-color: red;
    		}*/
    	</style>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript">
    		// $(function(){
    		// 	$(":input").focus(function() {
    		// 		$(this).addClass('focus');
    		// 	}).blur(function(event) {
    		// 		$(this).removeClass('focus');
    		// 	});
    		// })
    	</script>
    </head>
    <body>
    	<div class="person">
    		<p>姓名：<input type="text" name="name"></p>
    		<p>密码：<input type="password" name="password"></p>
    		<p>详细信息：<input type="textarea" name="textarea"></p>
    	</div>
    </body>
    </html>

2、ie6只支持:hover.使用jq实现相同效果

<!DOCTYPE html>
    <html>
    <head>
    	<title>Char 5</title>
    	<meta charset="utf-8"/>
    	<style type="text/css">
    		.focus{
    			border-color: red;
    		}
    	</style>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			$(":input").focus(function() {
    				$(this).addClass('focus');
    			}).blur(function(event) {
    				$(this).removeClass('focus');
    			});
    		})
    	</script>
    </head>
    <body>
    	<div class="person">
    		<p>姓名：<input type="text" name="name"></p>
    		<p>密码：<input type="password" name="password"></p>
    		<p>详细信息：<input type="textarea" name="textarea"></p>
    	</div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq 实现切换菜单选中状态

点击导航菜单，切换选中状态效果： ![1149706-20190922212835682-1951559906.png][] ![1149706-20190922212

落日映苍穹つ/ 2023年08月17日 16:01/ 0 赞/ 132 阅读

相关 JQ实现选项卡样式切换

HTML <div> <ul> <li class="active"></li> <li></li> <li>

傷城~/ 2023年02月16日 06:47/ 0 赞/ 29 阅读

相关 jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片） [https://juejin.im/post/6844903799115497479][https_juejin.im_

桃扇骨/ 2022年12月17日 01:28/ 0 赞/ 273 阅读

相关 js实现span文本选中效果

<script type="text/javascript"> function selectText() { if (docu

Bertha 。/ 2022年08月14日 00:00/ 0 赞/ 231 阅读

相关 JQ动画效果

一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记首先我们常用的动画有

迷南。/ 2022年08月01日 14:47/ 0 赞/ 290 阅读

相关 JQ实现效果：焦点选中样式

1、伪类：focus <!DOCTYPE html> <html> <head> <title>Char 5</title> <m

朴灿烈づ我的快乐病毒、/ 2022年06月12日 06:45/ 0 赞/ 237 阅读

相关 JQ实现效果：用户名表单验证

步骤： 1、判断当前失去焦点的元素是“用户名”还是“邮箱” 2、“用户名”，看是否小于6位，如果小于，就设置红色提醒 3、“邮箱”，用正则表达式判断是否符合邮箱格式，不符

逃离我推掉我的手/ 2022年06月10日 23:16/ 0 赞/ 214 阅读

相关 QGraphicsItem 选中和焦点问题

void ComponetCommonSlot::mousePressEvent(QGraphicsSceneMouseEvent event) {

比眉伴天荒/ 2022年06月08日 09:10/ 0 赞/ 323 阅读

相关 JQ-获取选中的Checkbox

使用JQuery获取选中的Checkbox： <!DOCTYPE html> <html lang="en"> <head> <met

妖狐艹你老母/ 2022年05月20日 07:00/ 0 赞/ 267 阅读

相关 jq实现多开关效果互不影响

有时候我们会用jq写一些特效，jq在控制DOM方面是非常方便的，虽然jq在最近几年没什么进展。下面就是一个实例图：![实例][20190127151040323.jpg]

素颜马尾好姑娘i/ 2021年09月17日 23:22/ 0 赞/ 334 阅读