web-dev-qa-db-ja.com

フォーカス上のプレースホルダーを削除する方法

この単純な関数を作成して、それをサポートしていないブラウザーにプレースホルダーを追加しました。

[〜＃〜] demo [〜＃〜]

問題は、ユーザーがその内部をクリックしたときにプレースホルダーを削除する可能性をその機能に追加するにはどうすればよいですか？

javascriptjqueryfocusplaceholder
22
FrancescoMussi

removeAttr（） のように使用してみてください、

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

デモ

blur()で再び_placeholder value_を取得するには、これを試してください。

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

デモ1

44
Rohan Kumar

これを実現するためにJavaScript関数を使用する必要はありません。より簡単な解決策は次のとおりです。

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

CSSは私のために働いた：

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

プレースホルダーをサポートしないブラウザーの場合は、これを使用できます： https://github.com/mathiasbynens/jquery-placeholder 。通常HTML5の場合と同様にプレースホルダー属性を追加し、プラグイン$('[placeholder]').placeholder();を呼び出します。次に、Rohan Kumarのコードを使用すると、クロスブラウザーになります。

0
Rudy

これを試してみてください

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

});
0
Sridhar R
$('input').focus(function()
{
  $(this).attr('placeholder','');

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

これは、フォーカスではなくクリックに関する私のソリューションです：

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

このための非常にシンプルで包括的なソリューションは、Mozilla、IE、Chrome、OperaおよびSafariで動作します：

<input type="text" placeholder="your placeholder" onfocus="this.placeholder=''" onblur="this.placeholder='your placeholder'" />
0
Saani
 $('*').focus(function(){
  $(this).attr("placeholder",'');
  });
0
Ankit Tyagi