js中表单失去焦点光标和获得焦点光标，提醒用户输入内容

最新推荐文章于 2023-04-04 18:30:06 发布

爬楼梯的小新

最新推荐文章于 2023-04-04 18:30:06 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/weixin_57607714/article/details/120118565

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

onfocus 获得焦点光标

onblur 失去焦点光标

案例：类似网站搜索框得到焦点表单内容为空并且文本颜色变黑

失去焦点显示默认搜索框显示‘手机’ 颜色变灰

<body>
    <input id="ipt" type="text" value="手机" />
    <script>
        var ipt = document.getElementById('ipt');
        //获得焦点
        ipt.onfocus = function() {
                if (this.value === '手机') {
                    this.value = '';
                }
                this.style.color = '#333';
            }
            //失去焦点
        ipt.onblur = function() {
            if (this.value === '') {
                this.value = '手机';
            }
            this.style.color = '#999';
        }
    </script>
</body>

案例2:当表单获得焦点时文字隐藏当用户不填写内容时文字显示 ‘必须填写’

<body>
    <input type="text" value="笔记本">
    <p>必须填写!</p>
</body>
<script>
    var ipt = document.querySelector('input');
    var p = document.querySelector('p')
    ipt.onfocus = function() {
        if (ipt.value === '笔记本') {
            ipt.value = '';
            ipt.style.color = '#333';
        }
        p.style.display = 'none';   //当获得光标 文字隐藏
    }
    ipt.onblur = function() {
        if (ipt.value === '') {
            ipt.value = '笔记本';
            ipt.style.color = '#ccc';
            p.style.display = 'block';  //为空显示p

        }

    }
</script>