孙肖宁

javascript表单中的提示语的隐藏
描述 :表单里面的提示语,样式1,当表单的输入框获取到焦点的时候,提示文字消失,兼容所有主流的浏览器。样式2,当开...
扫描右侧二维码阅读全文
28
2018/03

javascript表单中的提示语的隐藏

描述 :表单里面的提示语,样式1,当表单的输入框获取到焦点的时候,提示文字消失,兼容所有主流的浏览器。样式2,当开始向文本框中输入内容的时候,提示语消失。样式3则与样式1效果相同,但是采用的事heml自带的样式,使用的表单的placeholder属性,兼容性不太好,所以一般不用。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单内容提示</title>
    <style>
        label{
            position: absolute;
            top: 32px;
            left: 67px;
            font-size: 15px;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    样式1:<input type="text" id="inp1" value="样式1"><br>
    样式2:<label for="inp2">样式2</label><input type="text" id="inp2"><br>
    样式3:<input type="text" id="inp3" placeholder="样式3">
</body>
</html>
<script>
    //获取事件源和相关元素
    var inp1 = document.getElementById("inp1");
    var inp2 = document.getElementById("inp2");
    var inp3 = document.getElementById("inp3");
    //第一种样式
    inp1.onfocus = function () {
        //当表单获取焦点的时候,如果值为默认值,则清空
        if(this.value==="样式1"){
            inp1.value = "";
        }
    }
    //当表单失去焦点时,如果值为空,则值恢复默认值
    inp1.onblur = function () {
        if(this.value===""){
            inp1.value="样式1";
        }
    }
    //第二种样式
    var lab = document.getElementsByTagName("label")[0];
    inp2.oninput = function () {
        lab.className = "hide"
    }
</script>
Last modification:March 28th, 2018 at 02:43 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment