模拟搜索框获取焦点onfous 失去焦点onblur

liuguoxuanvip

于 2019-01-22 16:33:05 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/liuguoxuanvip/article/details/86596988

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            color: gray;
        }
    </style>
</head>
<body>
<script src="common.js"></script>
<script>
    /*
    * 获取文本框 ，获取焦点 onfocus，清空文本框里面的文字，字体颜色变成黑色
    * 失去焦点 onblur 恢复文本框里面的文字，字体颜色恢复为灰色
    *
    * */
    window.onload=function () {
        document.getElementById("txt").onfocus=function () {
            if (this.value=="请输入搜索内容") {
                document.getElementById("txt").value = "";
                document.getElementById("txt").style.color = "black";
            }

        }
        document.getElementById("txt").onblur=function () {
            if (this.value.length==0){
                document.getElementById("txt").value="请输入搜索内容";
                document.getElementById("txt").style.color="gray";
            }

        }
    }

</script>
<input type="text" value="请输入搜索内容" id="txt"/>

</body>
</html>