JS——input标签注册事件

最新推荐文章于 2023-05-12 22:10:05 发布

weixin_30646315

最新推荐文章于 2023-05-12 22:10:05 发布

阅读量222

点赞数

原文链接：http://www.cnblogs.com/wuqiuxue/p/7873925.html

版权

注意：淘宝的lable是用定位制作的，事件是oninput事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrong {
            border: 2px solid red;
        }

        .right {
            border: 2px solid #91B81D;
        }

        .lab {
            position: absolute;
            top: 56px;
            left: 60px;
            cursor: text;
            color: #ccc;
            font-size: 12px;
        }
        .show{
            display:block;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    京东：<input type="text" name="name" value="我是京东" id="inp1" /><br /><br />
    淘宝：<label for="inp2" id="lab" class="lab">我是淘宝</label><input type="text" name="name" value="" id="inp2" />
    <script>
        var inp1 = document.getElementById("inp1");
        var inp2 = document.getElementById("inp2");
        var lab = document.getElementById("lab");
        //inp1.onfocus();//页面加载完之后input标签就获取光标焦点
        inp1.onfocus = function () {
            if (inp1.value === "我是京东") {
                inp1.value = "";
            }
        }
        inp1.onblur = function () {
            if (inp1.value === "") {
                inp1.value = "我是京东";
            }
        }
        inp2.oninput = function () {
            if (inp2.value === "") {
                lab.className = "lab show";
            } else {
                lab.className = "lab hide";
            }
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/wuqiuxue/p/7873925.html

weixin_30646315

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——input标签注册事件

注意：淘宝的lable是用定位制作的，事件是oninput事件<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .wrong {...
复制链接

扫一扫