获取焦点后隐藏提示内容的输入框

2025-07-27 07:32:23

获取焦点后隐藏提示内容的输入框获取焦点后隐藏提示内容的输入框效果展示概述本文讲解如何制作，当获取文本框内容焦点后，然后隐藏文本框中提示内容的输入框。构建HTML框架代码语言：javascript代码运行次数：0运行复制<body> <input type="text" value="内容"> </body>CSS

获取焦点后隐藏提示内容的输入框

效果展示

概述

本文讲解如何制作，当获取文本框内容焦点后，然后隐藏文本框中提示内容的输入框。

构建HTML框架

代码语言：javascript代码运行次数：0运行复制

<body>
    <input type="text" value="内容">
</body>

CSS样式

代码语言：javascript代码运行次数：0运行复制

<style>
        input {
            /* 设置输入框中的内容 */
            color: #999;
        }
    </style>

JS逻辑

代码语言：javascript代码运行次数：0运行复制

<script>
        // 获取元素
        var text = document.querySelector('input');
        // 注册事件 获得焦点事件 onfocus 
         = function() {
                if (this.value === '内容') { // 当获取到内容的时候 
                    this.value = ''; // 我们将框中的内容设置为空
                }
                // 然后把输入文字的样式设置为黑 
                this. = '#';
            }
            // 注册事件 失去焦点事件 onblur
         = function() {            
            if (this.value === '') {
                this.value = '内容'; 
            }
            // 失去焦点之后把颜变化回去
            this. = '#999';
        }
    </script>

完整代码

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="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="内容">
    <script>
        // 获取元素
        var text = document.querySelector('input');
        // 注册事件 获得焦点事件 onfocus 
         = function() {
                if (this.value === '内容') { // 当获取到内容的时候 
                    this.value = ''; // 我们将框中的内容设置为空
                }
                // 然后把输入文字的样式设置为黑 
                this. = '#';
            }
            // 注册事件 失去焦点事件 onblur
         = function() {            
            if (this.value === '') {
                this.value = '内容'; 
            }
            // 失去焦点之后把颜变化回去
            this. = '#999';
        }
    </script>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2022-12-06，如有侵权请联系 cloudcommunity@tencent 删除事件functioninputtext框架

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1151077.html

推荐阅读

留言与评论（共有 7 条评论）

本站网友正规的民间借贷公司	3分钟前发表
#999; } </style> </head> <body> <input type="text" value="内容"> <script> // 获取元素 var text = document.querySelector('input'); // 注册事件获得焦点事件 onfocus = function() { if (this.value === '内容') { // 当获取到内容的时候 this.value = ''; // 我们将框中的内容设置为空 } // 然后把输入文字的样式设置为黑 this. = '#'; } // 注册事件失去焦点事件 onblur = function() { if (this.value === '') { this.value = '内容'; } // 失去焦点之后把颜变化回去 this. = '#999'; } </script> </body> </html>本文参与腾讯云自媒体同步曝光计划
本站网友鸡眼怎么治疗	20分钟前发表
分享自作者个人站点/博客
本站网友苹果曝光	11分钟前发表
#999; } </style> </head> <body> <input type="text" value="内容"> <script> // 获取元素 var text = document.querySelector('input'); // 注册事件获得焦点事件 onfocus = function() { if (this.value === '内容') { // 当获取到内容的时候 this.value = ''; // 我们将框中的内容设置为空 } // 然后把输入文字的样式设置为黑 this. = '#'; } // 注册事件失去焦点事件 onblur = function() { if (this.value === '') { this.value = '内容'; } // 失去焦点之后把颜变化回去 this. = '#999'; } </script> </body> </html>本文参与腾讯云自媒体同步曝光计划
本站网友苹果供应商重挫	23分钟前发表
然后隐藏文本框中提示内容的输入框
本站网友北京家政网	7分钟前发表
分享自作者个人站点/博客
本站网友优优宝贝	21分钟前发表
#999; } </style> </head> <body> <input type="text" value="内容"> <script> // 获取元素 var text = document.querySelector('input'); // 注册事件获得焦点事件 onfocus = function() { if (this.value === '内容') { // 当获取到内容的时候 this.value = ''; // 我们将框中的内容设置为空 } // 然后把输入文字的样式设置为黑 this. = '#'; } // 注册事件失去焦点事件 onblur = function() { if (this.value === '') { this.value = '内容'; } // 失去焦点之后把颜变化回去 this. = '#999'; } </script> </body> </html>本文参与腾讯云自媒体同步曝光计划

获取焦点后隐藏提示内容的输入框