javascript和jquery实现设置和移除文本框默认值效果代码

前端技术 2023/09/06 JavaScript

这里想实现的效果是：设置和移除文本框默认值，如下图鼠标放到文本框中的时候，灰字消失。

1.可以用简单的方式，就是给input文本框加上onfocus属性，如下代码：

复制代码 代码如下:

<input id=\"keyword\" name=\"keyword\" size=\"10\" class=\"inputstyle keywords\" value=\"请输入关键字进行搜索\"
   onfocus=\'if(this.value==\"请输入关键字进行搜索\"){this.value=\"\";}; \'
   onblur=\'if(this.value==\"\"){this.value=\"请输入关键字进行搜索\";};\'>

其实onfocus属性挺好用的，还可以在通过onfocus属性改变css样式，如下代码：

复制代码 代码如下:

<input id=\"keyword\" name=\"keyword\" size=\"10\" class=\"inputstyle keywords\" value=\"请输入关键字进行搜索\"
 onfocus=\'if(this.value==\"请输入关键字进行搜索\"){this.value=\"\";}; this.className=\"input01\"\'
 onblur=\'if(this.value==\"\"){this.value=\"请输入关键字进行搜索\";}; this.className=\"input02\"\'>

2.也可以使用jquery实现：

复制代码 代码如下:

$(document).ready(function() {
        var vdefault = $(\'#keyword\').val();

 $(\'#keyword\').focus(function() {
            //获得焦点时，如果值为默认值，则设置为空
            if ($(this).val() == vdefault) {
                $(this).val(\"\");
            }
        });
 $(\'#keyword\').blur(function() {
            //失去焦点时，如果值为空，则设置为默认值
            if ($(this).val()== \"\") {
                $(this).val(vdefault); ;
            }
        });
});

本文地址：https://www.stayed.cn/item/17329

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案