html获得输入框焦点

83次阅读
没有评论

在HTML中,可以使用 autofocus 属性来让某个输入框在页面加载时自动获取焦点。此外,也可以使用CSS样式来指定输入框在获取焦点时的样式。

下面是一个HTML页面的示例,展示如何使用 autofocus 属性和CSS样式来制作获得焦点的输入框:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>获得焦点的输入框示例</title>
	<style>
		input[type="text"], textarea {
			background-color: #f2f2f2;
			color: #333;
			border: 1px solid #ccc;
			padding: 5px;
			font-size: 16px;
			font-family: Arial, sans-serif;
		}
		
		input[type="text"]:focus, textarea:focus {
			background-color: #fff;
			border: 1px solid #4CAF50;
		}
	</style>
</head>
<body>
	<form>
		<p>
			<label for="name">姓名:</label>
			<input type="text" id="name" name="name" autofocus>
		</p>
		<p>
			<label for="message">留言:</label>
			<textarea id="message" name="message"></textarea>
		</p>
		<p>
			<input type="submit" value="提交">
		</p>
	</form>
</body>
</html>

在这个示例中,我们使用 autofocus 属性来让姓名输入框在页面加载时自动获取焦点。我们还使用了与前面示例中相同的CSS样式来指定输入框的样式,包括获得焦点时的样式。

当页面加载完成后,光标将自动进入到姓名输入框,输入框将变为白色,边框将变为绿色,提醒用户需要输入内容。如果用户想切换到留言输入框,只需要单击留言输入框即可。

正文完
 
评论(没有评论)