フォーカスの入力値を表示/非表示にする方法は？

Question

私はこれをウェブ全体で見ていますが、誰かがぼかしの入力値を表示してフォーカスを隠すのに最も簡単な方法のJavaScriptコードを持っているのだろうかと疑問を抱いていました。

Answer 1

これは私がmy blogで使用しているものです。そこに行って、ソースコードを調べてみてください。 、

<input 
    name="tb" 
    type="text" 
    value="some text" 
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''" /> 

Answer 2

私が知っている最も簡単な方法は以下の通りです：

は

function displaySearchText(text){ 
    var searchField = document.getElementById('searchField'); 
    if(searchField != null) 
     searchField.value = text; 
} 

あなたの入力フィールドには、次のようになりますplaceholder属性を使用します。それはSafariのボックスの外で動作し、他のブラウザでこの動作を模倣するような控えめなJSを追加することができます。

もっと読み：

• http://www.beyondstandards.com/archives/input-placeholders/（JS実装）
• http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

とGoogle。 ;-)

解決策はJosh Stodolaが投稿したものと似ていますが、より柔軟で普遍的です。

Answer 3

有効なHTMLを気にしない場合：

<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/> 

Answer 4

これはいつも私のために働い：

<input 
    type="text" 
    value="Name:" 
    name="visitors_name" 
    onblur="if(value=='') value = 'Name:'" 
    onfocus="if(value=='Name:') value = ''" 
/> 

Answer 5

を私はjQueryの道を好む：

$(function(){ 
    /* Hide form input values on focus*/ 
    $('input:text').each(function(){ 
     var txtval = $(this).val(); 
     $(this).focus(function(){ 
      if($(this).val() == txtval){ 
       $(this).val('') 
      } 
     }); 
     $(this).blur(function(){ 
      if($(this).val() == ""){ 
       $(this).val(txtval); 
      } 
     }); 
    }); 
}); 

それはザックパーデューによってHide Form Input Values On Focus With jQueryに変更されます。

Answer 6

これはまだGoogleに公開されているので、HTML5では、これを入力としてプレースホルダ属性を使用して、これを1つのhtmlで実現できることを指摘したいと思います。

<input type="text" id="myinput" placeholder="search..." /> 

現在のところ、プレースホルダは最新のブラウザでは標準的なので、これは実際には好ましい方法です。すべてのブラウザのために

Answer 7

：

<input type="text" name="inputname" placeholder="Your value" />