js显示与隐藏文本框

最新推荐文章于 2024-06-07 16:03:08 发布

i want to舞动乾坤

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量607

点赞数 1

分类专栏： js 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_52924633/article/details/120575055

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

该博客介绍了一个使用JavaScript实现的文本输入框聚焦和失焦时改变显示内容和颜色的效果。当输入框获得焦点时，如果初始值为'电脑'，则清空显示；失去焦点且内容为空时，恢复'电脑'显示并调整颜色为灰色。代码示例展示了如何利用onfocus和onblur事件处理函数实现这一交互功能。

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

获得焦点:onfocus

失去焦点:onblur

效果图：

默认会显示这个，当鼠标放在文本框区点击时：

‘电脑’隐藏，返回焦点后再次出现：

代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 20px;
            color: #ccc;
        }
    </style>

</head>

<body>
    <input type="text" value="电脑">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (text.value == '电脑') {
                this.value = '';
            }
            this.style.color = '#333';
        }
        text.onblur = function() {
            if (text.value == '') {
                this.value = '电脑';
            }
            this.style.color = '#ccc';
        }
    </script>


</body>

</html>

i want to舞动乾坤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js显示与隐藏文本框

获得焦点:onfocus失去焦点:onblur效果图：默认会显示这个，当鼠标放在文本框区点击时：‘电脑’隐藏，返回焦点后再次出现：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...
复制链接

扫一扫