0

HTMLタグのコードに次の問題があります。

<div id="searchbar"><input name="searchbar" type="text" id="searchfield" value="some text" onfocus="
if(this.value==this.defaultValue) 
    this.value=''; 
    this.style.color='#11111'" 
onblur="
if(this.value=='') 
    this.value=this.defaultValue;
    this.style.color='#22222'
if(this.value==this.defaultValue) 
    this.style.color='#111111'"

わかりました、主な目標は、「何らかのテキスト」で標準値が指定されている検索フィールドで、新しいエントリのみの色を変更することを承認することです。

そのメッセージ「some text」は、クリックすると消えます。これで、新しい値の色が標準の #222222 から #111111 に変わるはずです。第二に、このフィールドを離れるときは、2 つの異なる見方が必要です。最初の可能性は、新しい値が「何らかのテキスト」を含む標準の値と異なる場合、色は #222222 のままにする必要があるということです。2 番目の可能性は、新しいエントリが標準値と同じであるか、エントリが作成されていない場合でも、色がデフォルトの #222222 に戻ることです。したがって、上記のコードは最後のポイントまで機能します。

解決方法についてアドバイスをくれる人がいれば、本当に感謝しています。どうもありがとう。

4

2 に答える 2

1

疑似クラスを使用できます:focus

css on focus このようにcssを変更します

CSS

input[type="text"]{
color:white;
    background:red;
    padding:5px;
}




input[type="text"]:focus{
color:black;
    background:yellow;
}

ライブデモhttp://jsfiddle.net/VQ99D/

詳細http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

于 2012-06-20T09:58:03.767 に答える
-2

長くて複雑なコードの代わりに、HTML5 を使用するだけですplaceholder

Jsfiddle の例

HTML

<div id="searchbar">
<input name="searchbar" type="text" id="searchfield" placeholder="Some Text" />
</div>

CSS

#searchbar input {
    color: green;
}
input::-webkit-input-placeholder {
    color: red;
}
input:-moz-placeholder {
    color: red;
}​

ご希望に合わせて色を変えます。

注:プレースホルダーは IE ではサポートされません。

アップデート

プレースホルダーを使用してすべてのブラウザーをサポートする場合は、このプレースホルダー (jQuery プラグイン) を使用し、その中の を微調整しstyle.cssて結果を達成します。

于 2012-06-20T10:01:17.317 に答える