输入框--仿placeholder，oninput检测用户输入事件

最新推荐文章于 2024-06-23 00:55:54 发布

秋天1014童话

最新推荐文章于 2024-06-23 00:55:54 发布

阅读量833

点赞数 1

分类专栏： web前端 CSS3 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53222300

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

user-select: none; /* 禁止选择网页内容 */
完美解决了和input相配合的label能够选中问题。
代码中注释部分也可以达到此效果！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .search{
            width: 300px;
            height: 30px;
            margin: 100px auto;
            position: relative;
        }
        .search input{
            width: 200px;
            height: 20px;
            outline-style: none;
            text-indent: 10px;
        }
        .search label{
            position: absolute;
            top: 8px;
            left:10px;
            font-size: 12px;
            color: #666;
            cursor: text;
            /* touch-action: none;  禁止触发默认的手势操作
            -ms-touch-action: none; 
            pointer-events: none; css3属性，鼠标事件失效  */

            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            user-select: none;  /* 禁止选择网页内容 */
        }
    </style>
    <script>    
        window.onload = function(){
            function $(id){ return document.getElementById(id);}
             //oninput 大部分浏览器支持  检测用户表单输入内容
            //onpropertychange  ie678  检测用户表单输入内容
            $('txt').oninput = $('txt').onpropertychange = function(){  //  用户输入触发
                if($('txt').value == ""){
                    $('txtLabel').style.display = "block";
                }else{
                    $('txtLabel').style.display = "none";
                }
            }
            $('txt').onmouseover = function(){
                this.select(); //选中所有文本
            }
        }   
    </script>
</head>
<body>
    <div class="search">
        <input type="text" id="txt">
        <label for="txt" id="txtLabel">必败的品牌</label>
    </div>
</body>
</html>