jQuery 如何删除焦点上的占位符

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19676084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:25:43  来源:igfitidea点击:

How to remove placeholder on focus

javascriptjqueryfocusplaceholder

提问by FrancescoMussi

I made this simple function to add placeholder in browsers that do not support it:

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

DEMO

演示

The question is: How can I add to that function the possibility to remove the placeholder when the user click inside it?

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

回答by Rohan Kumar

Try to use removeAttr()like,

尝试使用removeAttr() 之类的,

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

Demo

演示

To get the placeholder valueagain on blur()try this,

placeholder value再次blur()尝试这个,

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

Demo 1

演示 1

回答by C_J

There is no need to use javascript function to accomplish this, a simpler solution is:

无需使用 javascript 函数来完成此操作,一个更简单的解决方案是:

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

回答by mintedsky

CSS worked for me:

CSS为我工作:

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

回答by hadi

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

回答by Saani

A very simple and comprehensive solution for this is which works in Mozila, IE, Chrome, Opera and Safari:

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

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

回答by Nerjuz

This is my solution on click not on focus:

这是我点击而不是焦点的解决方案:

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

回答by Ankit Tyagi

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

回答by Sridhar R

Try This hope it helps

试试这个希望它有帮助

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

});

回答by vikaskimt

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

});

回答by Rudy

For browsers that don't support placeholder you can use this: https://github.com/mathiasbynens/jquery-placeholder. Add the placeholder attribute normally as for HTML5, then call this plugin: $('[placeholder]').placeholder();. Then use Rohan Kumar's code and will be cross-browser.

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