JS显示隐藏文本框内容

最新推荐文章于 2022-04-14 11:37:39 发布

一夕ξ

最新推荐文章于 2022-04-14 11:37:39 发布

阅读量556

点赞数 2

分类专栏：前端学习文章标签： javascript 前端 ecmascript

本文链接：https://blog.csdn.net/qq_45387575/article/details/123022476

版权

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

当鼠标在文本框内部时，显示手机二字，当离开时，不显示内容

<!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>
        .box {
            height: 40px;
            width: 300px;
            margin: 0 auto;
            border: 1px solid skyblue
        }
        
        input {
            height: 40px;
            width: 210px;
            padding: 0 0;
            float: left;
            border: none;
            caret-color: black;
        }
        
        .search {
            background-color: skyblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: white
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" value="内容">
        <div class="search">搜索</div>
    </div>
    <script>
        var input = document.querySelector('input')
        input.onfocus = function() {
            input.value = ''
        }
        input.onblur = function() {
            input.value = '内容'
        }
    </script>
</body>

</html>

分析：

1、首先表单需要两个新事件，获得焦点onfocus；失去焦点onblur

2、如果获得焦点，判断表单里面的内容是否为默认文字，如果是默认文字，就清空表单内容。

因此原来基础上缺少一个判断：

修改部分：

     <script>
        var input = document.querySelector('input')

        input.onfocus = function() {
            if (input.value == '内容') {
                input.value = ''
            }
            //获得焦点需要把文本框里面的文字颜色变黑
            input.style.color = 'red'
        }
        input.onblur = function() {
            if (input.value == '') {
                input.value = '内容'
            }
            //失去焦点，颜色变浅
            input.style.color = 'grey'
        }
    </script>

input.style.color = 'red'

驼峰命名法，c不用大写

一夕ξ

关注

2
点赞
踩
3

收藏

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

当鼠标在文本框内部时，显示手机二字，当离开时，不显示内容<!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, init...
复制链接

扫一扫