js点击文本框改变边框颜色

在JavaScript中，通过监听文本框（input元素）的点击事件，可以实现点击时改变边框颜色的效果。以下是实现这一功能的基础概念和相关代码示例。

基础概念

事件监听：JavaScript允许为HTML元素添加事件监听器，以便在特定事件发生时执行代码。
DOM操作：通过JavaScript可以修改HTML元素的样式属性。

实现步骤

获取文本框元素。
添加点击事件监听器。
在事件处理函数中改变文本框的边框颜色。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Border Color on Click</title>
<style>
    input[type="text"] {
        border: 2px solid #ccc; /* 初始边框颜色 */
        padding: 10px;
        width: 200px;
    }
</style>
</head>
<body>

<input type="text" id="myInput" placeholder="Click me!">

<script>
    // 获取文本框元素
    var inputElement = document.getElementById('myInput');

    // 添加点击事件监听器
    inputElement.addEventListener('click', function() {
        // 改变边框颜色
        this.style.borderColor = '#007BFF'; // 蓝色
    });

    // 可选：添加失去焦点事件监听器以恢复原色
    inputElement.addEventListener('blur', function() {
        this.style.borderColor = '#ccc'; // 恢复初始颜色
    });
</script>

</body>
</html>