3

基本的に、古いブラウザと互換性があるように、JavaScript を使用して HTML5 の「プレースホルダ」属性を再作成したいと考えています。

私は十分に簡単な OnFocus と OnBlur の組み合わせを使用しています。次のコードでそれを行いました。

<textarea onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Placeholder text</textarea>

プレースホルダーのテキストは明るい灰色 (#CCC) になり、テキスト領域にフォーカスがあると、より暗い灰色 (#333) に変わります。これは CSS で問題なく実行されますが、テキストエリアのコンテンツが元のプレースホルダーと異なる場合、フォーカスされていないときは色を濃い灰色のままにしておきます。

私の説明が不十分である場合、ここに (非常にわずかに) より良い説明があります。

ページの読み込み ---> textarea placeholder = #CCC ---> ユーザーが textarea にフォーカス ---> textarea のコンテンツが #333 になる ---> ユーザーがフォーカスを放す ---> コンテンツは #CCC に戻る必要があります。変更された場合、#333 のままにする必要があります

太字部分は私が助けを必要としている部分です!

ありがとう！:D

編集:フォーカス時にプレースホルダーが消えるという事実は問題ではなく、「修正」する必要はありません

4

2 に答える 2

3

http://jsfiddle.net/DszSR/

​textarea {
  color: #ccc;
}​

<textarea
  onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#333';"
  onblur="if(this.value=='') this.value=this.defaultValue; this.style.color = '#ccc';">Placeholder text</textarea>​
于 2012-08-25T11:28:27.707 に答える
0

CSSまたはJSを使用してページの読み込み時にテキストの色を#CCCに設定する必要があります（私のコードは、フォーカスされた場合にその設定をオーバーライドし、必要な場合にのみぼかしで復元します）

<textarea onfocus="if(this.value==this.defaultValue)this.value='';this.style.color='#333'" onblur="if(this.value=='') {this.value=this.defaultValue;this.style.color='#CCC'}">Placeholder text</textarea>​
于 2012-08-25T11:24:33.403 に答える