首页js编程实现文本框简单效果，文本框失去焦点时字体为灰色（#ccc），文本框获得焦点时字体颜色为黑色（#000）全部代码

js编程实现文本框简单效果，文本框失去焦点时字体为灰色（#ccc），文本框获得焦点时字体颜色为黑色（#000）全部代码

时间: 2024-12-14 18:24:38 浏览: 13

在JavaScript中，你可以通过给文本框元素添加事件监听器来实现这个简单的聚焦和失焦时颜色变化的效果。以下是基本的HTML和JavaScript代码示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .gray-focused { color: #ccc; } .black-focused { color: #000; } </style> </head> <body> <input type="text" id="myTextBox" onfocus="changeColor('black-focused')" onblur="changeColor('gray-focused')"> </body> <script> function changeColor(colorClass) { var textBox = document.getElementById('myTextBox'); if (textBox.hasFocus()) { // 判断是否获得了焦点 textBox.classList.add(colorClass); } else { textBox.classList.remove(colorClass); // 如果失去焦点则移除对应类名 } } </script> </html> ``` 在这个例子中，当文本框获取焦点时，`changeColor('black-focused')`函数会将`black-focused`类添加到输入框上，改变其颜色；当失去焦点时，`onblur`事件触发`changeColor('gray-focused')`，移除该类并恢复灰色字体。

阅读全文