搜索框中“请输入关键字”消失出现的实例

up1292

已于 2022-09-21 13:57:42 修改

阅读量286

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

于 2022-09-18 14:44:46 首次发布

本文链接：https://blog.csdn.net/up1292/article/details/126917649

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:300px; margin: 0 auto;">
        <!--onfocus是获取焦点事件，onblur是失去焦点事件-->
        <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>
        <input type="text" placeholder="请输入关键字" />
    </div>
    <script>
        function Focus(){
            var tag = document.getElementById('i1');
            var text = tag.value;
            if(text=="请输入关键字"){
                tag.value = "";
            }
        }

        function Blur(){
            var tag = document.getElementById('i1');
            var text = tag.value;
            if(text.trim()==""){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

以上在事件中还可以使用this来指代标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:600px; margin: 0 auto;">
        <!--
        onfocus是获取焦点事件，onblur是失去焦点事件。
        此处使用this可以获取到当前标签DOM对象
        -->
        <input id="i1" type="text" value="请输入关键字" onfocus="Focus(this);" onblur="Blur(this);"/> 
        <input type="text" placeholder="请输入关键字" />
    </div>
    <script>
        function Focus(self){   //这里随便给了个参数，借用了python中的self，使用什么都可以
            if(self.value=="请输入关键字"){   //这里的self就是id="i1"标签的对象
                self.value = "";
            }
        }

        function Blur(self){
            if(self.value.trim()==""){
                self.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>