Dom实现input的焦点触发

最新推荐文章于 2023-10-12 00:51:18 发布

yorup

最新推荐文章于 2023-10-12 00:51:18 发布

阅读量565

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_48639378/article/details/125525592

版权

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

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>

效果如下：