JS点击文本框改变背景颜色

最新推荐文章于 2024-04-17 23:32:22 发布

kiss_scarecrow

最新推荐文章于 2024-04-17 23:32:22 发布

阅读量2.5k

点赞数 3

本文链接：https://blog.csdn.net/kiss_scarecrow/article/details/109253677

版权

html 同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

这个博客展示了一个简单的HTML页面，其中包含多个文本输入框。当输入框获得焦点时，JavaScript函数`txtfocus()`会将背景颜色更改为#FF9966，失去焦点后`txtblur()`函数则将背景颜色恢复为白色。这个例子展示了如何用JavaScript增强网页交互性。

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

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文本框获焦点改变背景颜色</title>
	</head>
	<body>
		<table align="center"width="337" height="204"border=()>
		<tr>
			<td width="108">用户名</td>
		<td width="213"><form name="form1"method="post"action="">
			<input type="text"name="textfield"onfocus="txtfocus()"onBlur="txtblur()">
		</form></td>
		</tr>
		<tr>
			<td >密码</td>
		<td ><form name="form2"method="post"action="">
			<input type="text"name="textfield2"onfocus="txtfocus()"onBlur="txtblur()">
		</form></td>
		</tr>
		<tr>
			<td >真实姓名</td>
		<td ><form name="form3"method="post"action="">
			<input type="text"name="textfield3"onfocus="txtfocus()"onBlur="txtblur()">
		</form></td>
		</tr>
		<tr>
			<td >性别</td>
		<td ><form name="form4"method="post"action="">
			<input type="text"name="textfield5"onfocus="txtfocus()"onBlur="txtblur()">
		</form></td>
		</tr>
		<tr>
			<td >邮箱</td>
		<td ><form name="form5"method="post"action="">
			<input type="text"name="textfield4"onfocus="txtfocus()"onBlur="txtblur()">
		</form></td>
		</tr>
		</table>
		<script language="JavaScript">
			<!--
			function txtfocus(event){
				var e=window.event;
				var obj=e.srcElement;
				obj.style.background="#FF9966";
			}
			function txtblur(event){
				var e=window.event;
				var obj=e.srcElement;
				obj.style.background="#FFFFFF";
			}
			//-->
		</script>
		
	</body>
</html>

结果如图：