关于input标签获取焦点并检测及内容的方法

最新推荐文章于 2025-05-16 10:03:07 发布

北纬_13度

最新推荐文章于 2025-05-16 10:03:07 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/u014223679/article/details/40977029

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的HTML+JavaScript实现方案，用于实时监控输入框的值变化，并根据不同情况动态调整输入框的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没写了，今天来写点东西

要判断input的value值，不管他是你手敲的(onkeydown)还是鼠标点击粘贴(没有相应事件)<的，都能执行相应的功能，就需要开一个定时器不断地去侦测了

这里我写了个简单的demo来模拟

<span style="font-size:18px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
$(document).ready(function() {
	var tim1=null,tim2=null;
	$("input").focus(function(event) {<span style="white-space:pre">		</span>//获取焦点后执行
		$(this).css('background-color', 'blue');
			// alert($(this).val()=="")
			tim1=setInterval(function(){<span style="white-space:pre">	</span>//开定时器检测其内容
			if($("input").val()!=""){<span style="white-space:pre">	</span>//判断其value值是否是所需要的
				$("input").css('background-color', 'red');
				console.log("asdas")
			}
			
		}, 30)
	});
	$("input").blur(function(event) {<span style="white-space:pre">	</span>//失去焦点执行清除定时器
		clearInterval(tim1);
	});


});

	</script>
	<style type="text/css">
input{
	width: 200px;
	height: 30px;
	background-color: yellow;
}
	</style>
</head>
<body>
	<input type="text">
	<div>sauhshfashdgioho</div>
</body>
</html></span>

当然，如果你需要在input显示出来就获取焦点而不是点击才获取焦点，也可以，不过这里要在input里面加入onfocus="ap()">>(ap()为自定义的函数)，将上面代码中focus执行的内容封入ap()函数内，就可以了。

这里要注意一点ap()函数必须在ready或者onload外边，不能放在里面，否者会提示找不到该函数

<span style="font-size:18px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
 var tim=null;
 function ap() {
  tim=setInterval(function(){
   if($("input").val()!=""){
    $("input").css('background-color', 'red');
    console.log("asdas")
    }
  }, 30)
 }

$(document).ready(function() {
	$("input").focus();
	$("input").blur(function(event) {
		clearInterval(tim1);
	});
});</span><span style="font-size: 24px;">

	</script>
	<style type="text/css">
input{
	width: 200px;
	height: 30px;
	background-color: yellow;
}
	</style>
</head>
<body>
	<input type="text"onfocus="ap()" >
	<div>sauhshfashdgioho</div>
</body>
</html></span>