文本框获得焦点

置顶 Earl_yuan

已于 2022-03-19 10:35:13 修改

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端总结文章标签： javascript 文本框焦点

于 2016-02-16 19:58:05 首次发布

本文链接：https://blog.youkuaiyun.com/Earl_yuan/article/details/50676614

前端总结专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现文本框焦点控制的方法。当文本框为空时，通过JS函数检查并提示用户输入，并使文本框重新获得焦点，提高用户体验。

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

在实际开发中，我们可能会遇到需要对文本框进行判断，如果为空的情况，是不能进行表单提交的，而且为了用户界面的交互友好考虑，我们需要让文本框获得焦点以便用户继续输入。下面我们就来看看如何使用js控制实现这一需求。

<body>
	<input type="text" id="tmpName" name="tmpName" onblur="checkExist()"><span id="tip"></span>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		//加载该页面时让其获得焦点
		$(function(){
		$("#tmpName").focus(); 
		});

		//js函数
		function checkExist() {
			var tmpName= $("#tmpName").val();
			if(tmpName.length == 0){
				$("#tip").html("请输入内容");
				//输入框获取焦点
				window.setTimeout (function(){
					document.getElementById ('tmpName'). select();
				},0 );
			}else if(tmpName.length != 0){
				alert("内容不为空");
			}
		}
	</script>
</body>