怎么清除表单的value值??

<input  type="text"   name="搜索"  value="搜索"  id="selector"/>

$(function(){//只对chrome有效??????????
    var selector=$("#selector");
    var value=selector.attr("value");
    selector.focus(function(){
        $(this).attr("value","")
    }).blur(function(){
        $(this).attr("value",value);
    })
})

希望当搜索框获得焦点时,清除value内容,失去焦点时,重新添加value值,但是结果只对谷歌有效,当获得焦点时ie根本没反应,不知什么情况??
阅读 7k
5 个回答

建议你改进一下,首先应该优先使用placeholder

<input  type="text"   name="搜索"  value="搜索" placeholder="搜索" id="selector"/>

这个placeholder在ff、chrome等浏览器支持修改样式

::-moz-placeholder{color:red;}              //ff
::-webkit-input-placeholder{color:red;}     //chrome,safari
:-ms-input-placeholder{color:red;}          //ie10          

然后判断一下 如果浏览器不支持placeholder(我这个例子只判断了ie8),再进行js模拟placeholder的操作

$(function(){
    if(!!navigator.userAgent.match(/MSIE 8.0/)){
            $('input[placeholder], textarea[placeholder]').each(function() {
                var input = $(this);
                if (input.val() === '' && input.attr("placeholder") !== ''){   
                    input.addClass("placeholder").val(input.attr('placeholder'));
                }

                input.focus(function() {
                    if (input.val() === input.attr('placeholder')) {
                        input.val('');
                    }
                });

                input.blur(function() {
                    if (input.val() === '' || input.val() === input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
    }
});

注释:
:text选择所有类型为text的input元素。
如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label

首先,你得确定是否是focus没有回调,别光看现象,要看本质(问题的根源)。
你可以在focus中调试输出,看是否执行,至少说我印象中focus在浏览器端是没有兼容性问题的。

然后,为啥要用$.attr呢,为啥不直接$.val('')呢?

最后,你这个体验是有问题的(针对实际情况),比如说我输入了内容,不小心离开了焦点,重新进入输入框输入,my god,我之前的输入被你清空了,用户会怎么看?

你是想放个预览值吧?placeholder属性不就可以了吗

表单赋值:

$selector.val('someValue')

表单赋空值,等于清空表单里面的值:

$selector.val('')

placeholder就可以解决

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题