首页js编程实现文本框简单效果，默认样式如图5，文本框失去焦点时字体为灰色（#ccc）如图6所示，文本框获得焦点时字体颜色为黑色（#000）如图7所示。图5 默认样式图6 文本框获得焦点图7 文本框失去焦点

js编程实现文本框简单效果，默认样式如图5，文本框失去焦点时字体为灰色（#ccc）如图6所示，文本框获得焦点时字体颜色为黑色（#000）如图7所示。图5 默认样式图6 文本框获得焦点图7 文本框失去焦点

时间: 2024-12-14 08:24:15 浏览: 8

在JavaScript中，你可以通过HTML、CSS以及一些基本的事件处理来实现这样的文本框样式切换。首先，创建一个简单的HTML输入元素： ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" type="text/css" href="styles.css">  </head> <body> <input type="text" id="myTextBox" placeholder="默认样式"> </body> </html> ``` 然后，在`styles.css`文件中设置默认样式和聚焦/失焦状态下的样式： ```css /* styles.css */ #myTextBox { width: 200px; height: 30px; padding: 5px; border: 1px solid #ccc; font-size: 14px; color: #000; /* 初始字体颜色为黑色 */ } #myTextBox:focus { outline: none; /* 避免浏览器自带的边框 */ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 当聚焦时添加阴影 */ color: #000; /* 继续保持字体颜色为黑色 */ } #myTextBox:active, #myTextBox:hover { color: #ccc; /* 文本框失去焦点时颜色变为灰色 */ } ``` 当用户点击文本框时，它会获取焦点并显示黑色字体。当鼠标离开文本框或者按其他地方并移开焦点时，颜色会变为灰色。注意，为了防止浏览器默认的高亮效果，我们使用了`outline: none;`。

阅读全文