oninput/ onpropertychange仿淘宝搜索框

最新推荐文章于 2023-03-14 16:27:48 发布

kumayato

最新推荐文章于 2023-03-14 16:27:48 发布

阅读量303

点赞数

分类专栏： JavaScript-demo 文章标签：表单

本文链接：https://blog.csdn.net/kumayato/article/details/71647169

版权

JavaScript-demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

oninput 大部分浏览器支持检测用户表单输入内容
onpropertychange ie678 检测用户表单输入内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .search-1 {
            width:300px;
            height: 30px;
            margin: 100px auto;
            position: relative;
        }
        .search-1 input {
            width:200px;
            height:25px;

        }
        .search-1 #message {
            font-size: 12px;
            color:#ccc;
            position: absolute;
            top:8px;
            left:20px;
            cursor: text;
        }

        .search-2 {
            width:300px;
            height: 30px;
            margin: 150px auto;
            position: relative;
        }

        .search-2 input {
            width:200px;
            height:25px;
            padding-left: 20px;
        }
    </style>
    <script>
        window.onload = function(){
            function $(id){return document.getElementById(id);}
            // oninput 大部分浏览器支持  检测用户表单输入内容
            // onpropertychange  ie678  检测用户表单输入内容
                $("txt").oninput = $("txt").onpropertychange = function(){
                    if(this.value == ""){
                        $("message").style.display = "block";
                    }
                    else{
                        $("message").style.display = "none";
                    }
                }
            }
    </script>
</head>
<body>
<!--js的方法实现-->
<div class="search-1">
    <input type="text" id="txt"/>
    <label for="txt" id="message">必败的国际大牌</label>
</div>

<!--HTML5的placeholder属性实现-->
<div class="search-2">
    <input type="text" placeholder='必败的国际大牌'/>
</div>
</body>
</html>