如何删除焦点上的占位符[重复]答案

【问题标题】：How to remove placeholder on focus [duplicate]如何删除焦点上的占位符[重复]
【发布时间】：2013-11-09 15:53:56
【问题描述】：

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

DEMO

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

【问题讨论】：

为什么你使用占位符这个你可以使用模糊也占位符是浏览器的内置属性，即不支持这个remeber！

标签： javascript jquery focus placeholder

【解决方案1】：

尽量用removeAttr()点赞，

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

Demo

要在blur() 上再次获取placeholder value，试试这个，

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

Demo 1

【讨论】：

谢谢罗汉。它在 Chrome 中正常工作。 Altough 在 Explorer (v. 8) 中不起作用，这是我最需要这个功能的地方。你知道我该怎么做才能让这段代码在 Explorer 8 上也能正常工作吗？谢谢！
如果你需要我已经创建了一个新的 JSBin：jsbin.com/avIfuDAf/1
@johnnyfittizio 这是因为placeholder 在IE 8 中不起作用，为此您必须在focus and blur 上设置elements 的value 参见演示jsbin.com/avIfuDAf/3
如何在您发布的代码中准确地做到这一点？谢谢！
谢谢罗汉！不知何故，我错过了上次 jsbin 的巡演 .. 效果很好！

【解决方案2】：

不需要使用javascript函数来完成这个，一个更简单的解决方案是：

<input type="text" placeholder="enter your text" onfocus="this.placeholder=''" onblur="this.placeholder='enter your text'" />

【讨论】：

不错的一个！它运行良好
@C_J 这太棒了..

【解决方案3】：

CSS 为我工作：

input:focus::-webkit-input-placeholder {
    color: transparent;
}

【讨论】：

现代浏览器的最佳解决方案。
任何 FireFox 解决方案
尼莱什：css-tricks.com/almanac/selectors/p/placeholder

【解决方案4】：

$("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");
    });
});

【讨论】：

【解决方案5】：

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

<input type="text" placeholder="your placeholder" onfocus="this.placeholder=''" onblur="this.placeholder='your placeholder'" />

【讨论】：

【解决方案6】：

 $('*').focus(function(){
  $(this).attr("placeholder",'');
  });

【讨论】：

【解决方案7】：

试试这个希望对你有帮助

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

});

【讨论】：

【解决方案8】：

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

});

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

$(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);
    }
});

【讨论】：