js 隐藏文本显示内容

最新推荐文章于 2022-03-20 10:51:26 发布

也是够够的了

最新推荐文章于 2022-03-20 10:51:26 发布

阅读量858

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_55869175/article/details/115359467

版权

这篇博客介绍了如何使用JavaScript操作CSS样式，实现在input文本框获取焦点时删除默认提示文字，失去焦点时恢复提示文字的功能。通过onfocus和onblur事件，结合条件判断，实现了交互式的输入框提示效果。

摘要由CSDN通过智能技术生成

用js隐藏文本value提示内容

<style>
    input{
        width:300px;
        height:20px;
        color: #888;
    }
</style>
<body>
    <input type="text" value="手机">

    <script>
        // 获取元素
        var text = document.querySelector('input');
        //注册事件 获得焦点事件
        text.onfocus = function(){
            //将默认文字删除
            if(this.value==='手机'){
                this.value='';
            }
            console.log('获得焦点事件');
            //输入的文字颜色加深
            this.style.color = '#333';
        }

        text.onblur = function(){
            if(this.value === ''){
                this.value = '手机';
            }
            this.style.color = '#888';
            console.log('失去焦点');
        }
    </script>
</body>

可大致分为三个步骤。
1、首先获取到input标签。命名为text。
2、设置两个函数分别是获取焦点事件情况、失去焦点事件情况。
3、再在两个函数中添加内容，利用if判断value属性值是否为我们设置的提示语‘手机’ 。
在获取焦点，即点击输入框时，属性值为设置的默认文本则删除默认值。
在失去焦点，即点击输入框外，属性值若为空则回复默认值。