Dom实现input的焦点触发

最新推荐文章于 2023-04-28 10:33:56 发布

yorup

最新推荐文章于 2023-04-28 10:33:56 发布

阅读量678

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/m0_48639378/article/details/125525592

版权

这篇博客介绍了如何使用JavaScript的onfocus和onblur事件处理函数来实现在文本框获取焦点时清除默认文字，失去焦点时恢复显示默认提示文字的功能。通过两种不同的实现方式，展示了如何在不干扰用户输入的情况下提供友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本框点击时，里面的默认文字隐藏，鼠标离开文本时显示文字。

onfocus 获得鼠标焦点触发

onblur 失去鼠标焦点触发

方法一，使用两个事件

代码如下：

<input type="text" name="" id="" value="请输入信息">
        <script>
            var input = document.querySelector('input');
            input.onfocus = function(){
                this.value = '';
            }
            input.onblur = function(){
                this.value = '请输入信息';
            }
        </script>

方法二：封装函数

代码如下：

<input type="text" value="请输入信息" onfocus="hidtxt()" onblur="showtxt()">
        <script>
            var input = document.querySelector('input');
            function hidtxt(){
                //如果不加if，那么输入其他信息失去焦点后输入框也会清空
                if(input.value == '请输入信息'){
                    input.value = '';
                }
            }
            function showtxt(){
                if(input.value ==''){
                input.value = '请输入信息';
            }}
        </script>

效果如下：