JavaScript基础学习显示隐藏文本框内容

最新推荐文章于 2024-11-05 15:26:40 发布

柠檬味小发糕

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量475

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43537319/article/details/121940737

版权

JavaScript 文本框焦点事件内容隐藏前端开发

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

JavaScript基础学习显示隐藏文本框内容

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-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 inpt = document.querySelector('input');
        inpt.onfocus = function() {
            console.log('得到焦点');
            if (inpt.value === '手机') {
                inpt.value = '';
                inpt.style.color = '#333';
            }


        }
        inpt.onblur = function() {
            console.log('失去焦点');
            if (inpt.value === '') {
                inpt.value = '手机';
                inpt.style.color = '#999';
            }

        }
    </script>

</body>

</html>

在这里插入图片描述