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

科技前沿 • 2025-03-02 21:04 • 阅读 51

大家好，我是讯享网，很高兴认识大家。

<!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>

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

相关推荐