前端js实践——输入框内容的显示和隐藏

主要内容:Javascrip中事件处理的方法,DOM中的常见对象及其属性、方法;

题目描述:显示和隐藏输入框中的提示内容,具体表现如下图:

1.输入框获得焦点,提示内容消失,边框变色

    

2.输入框失去焦点,如果内容为空,提示内容恢复,边框变色;如果内容不为空,只有边框变色

   

 代码:<!DOCTYPE html>
<html>
<head>
    <meta charset="UFT-8">
    <meta name = "viewport" content="width = device-width = device-width,initial-scale = 1.0">
    <meta http-equiv = "X-UA-compatible" content="ie = edge">
    <title>Document</title>
    <style>input{
        color: #999}</style>       //改变输入框字体颜色
</head>
<body>
    <input type = "text"value = "邮箱/ID/手机号">    //框内文本
    <script>

       //文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 如果找不到匹配项,则返回null
        var text = document.querySelector("input");   
        text.onfocus = function(){
            if(this.value === "邮箱/ID/手机号")     //获得焦点
            {
                this.value = '';
            } 
        }
        text.onblur = function(){       //失去焦点
            if(this.value === '' )
            {
                this.value = "邮箱/ID/手机号";
            }
        }
    </script>
</body>
<ml>

猜你喜欢

转载自www.cnblogs.com/bambooandbear/p/12814936.html