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

Posted 2023-03-05

【中文标题】如何删除焦点上的占位符[重复]

【英文标题】：How to remove placeholder on focus [duplicate]

【发布时间】：2013-11-09 15:53:56

【问题描述】：

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

DEMO

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

【问题讨论】：

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

【参考方案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);
    
);