25

我做了这个简单的函数来在不支持它的浏览器中添加占位符：

演示

问题是：当用户在其中单击时，如何向该功能添加删除占位符的可能性？

4

10 回答 10

46

尝试使用removeAttr() 之类的，

$('input,textarea').focus(function(){
   $(this).removeAttr('placeholder');
});

演示

要placeholder value再次blur()尝试这个，

$('input,textarea').focus(function(){
   $(this).data('placeholder',$(this).attr('placeholder'))
          .attr('placeholder','');
}).blur(function(){
   $(this).attr('placeholder',$(this).data('placeholder'));
});

演示 1

于 2013-10-30T07:19:44.597 回答
36

无需使用 javascript 函数来完成此操作，更简单的解决方案是：

<input type="text" placeholder="enter your text" onfocus="this.placeholder=''" onblur="this.placeholder='enter your text'" />
于 2014-09-05T23:49:17.953 回答
20

CSS为我工作：

input:focus::-webkit-input-placeholder {
    color: transparent;
}
于 2014-07-25T08:18:01.320 回答
1 
$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});
于 2015-02-28T09:56:50.110 回答
1

一个非常简单而全面的解决方案适用于 Mozila、IE、Chrome、Opera 和 Safari：

<input type="text" placeholder="your placeholder" onfocus="this.placeholder=''" onblur="this.placeholder='your placeholder'" />
于 2015-08-12T04:38:09.680 回答
0

试试这个希望它有帮助

$('input,textarea').focus(function()
{
$(this).attr('placeholder','');

});
于 2013-10-30T07:25:43.817 回答
0 
$('input').focus(function()
{
  $(this).attr('placeholder','');

});
于 2013-10-30T07:27:52.633 回答
0 
 $('*').focus(function(){
  $(this).attr("placeholder",'');
  });
于 2013-10-30T07:20:36.010 回答
0

对于不支持占位符的浏览器，您可以使用： https ://github.com/mathiasbynens/jquery-placeholder 。像 HTML5 一样正常添加占位符属性，然后调用这个插件：$('[placeholder]').placeholder();。然后使用 Rohan Kumar 的代码，将是跨浏览器的。

于 2013-10-30T07:39:37.280 回答
0

这是我点击不关注焦点的解决方案：

$(document).on('click','input',function(){
    var $this = $(this);
    var place_val = $this.attr('placeholder');
    if(place_val != ''){
        $this.data('placeholder',place_val).removeAttr('placeholder');
    }
}).on('blur','input',function(){
    var $this = $(this);
    var place_val = $this.data('placeholder');
    if(place_val != ''){
        $this.attr('placeholder',place_val);
    }
});
于 2016-01-28T10:28:46.930 回答