开发者社区> 问答> 正文

怎么清除表单的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值,但是结果只对谷歌有效,当获得焦点时

展开
收起
a123456678 2016-03-11 14:29:54 1994 0
1 条回答
写回答
取消 提交回答
  • 建议你改进一下,首先应该优先使用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。

    2019-07-17 18:59:15
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载