点击input输入框变颜色

img

img

在点击input输入框时，改变输入框的颜色；但点击时并没有变色，而在点击其他地方才变色


<!--
 * @Author: your name
 * @Date: 2021-12-30 16:59:23
 * @LastEditTime: 2022-01-14 08:34:43
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /未命名文件夹/123.html
-->
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>color</title>

<style type="text/css">

* {margin: 0; padding: 0;}

.main {margin: 50px auto; width: 400px;}

.inp {

width: 200px;

height: 30px;

border:1px solid #999;

outline:none;

}

</style>

</head>

<body>

<div class="main">

<input class="inp" onfocus="dian()" onblur="quxiao()" />

<script language="javascript">

// 鼠标点击后调用的方法

function dian(){

document.getElementsByTagName('input')[0].style.border = '1px solid red';

}

// 鼠标移开表单点击其他后调用的方法

function quxiao(){

document.getElementsByTagName('input')[0].style.border = '1px solid #999';

}

</script>

</div>

</body>

</html>

img

用css就可以了

input:focus {
        border-color: red;
}