1

みたいなことができるようになりたい

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

また、タイトルはフィールド値として自動的にフェードアウトし、元に戻ります。これは、stackoverflow の「検索」とは異なります (一番上にあり、フェードアウトするだけです)。

javascript を考え出して and を使用することもできますonblurがonfocus、それは面倒なので不要であることを願っています。できれば、任意のファイル内のすべての INPUT および TEXTAREA に対して 1 つの関数だけを設定するので、そのtitle.

最初の質問: これの名前は?

主な質問: 誰でも良い解決策を持っていますか? jqueryがない場合はどうなりますか？たぶん、CSS3だけでそれを行う方法があるかもしれませんが、私はそれを疑っています...

4

2 に答える 2

3

新しいブラウザーでのみ動作することに問題がない場合は、テキスト フィールドのplaceholder属性を使用して、フォーカスすると消え、ぼかしたときに再び表示されるプレースホルダーを指定できます。詳細については、Dive Into HTML5を参照してください。

<input type="text" name="txtField" value="" placeholder="input your text" />

古いブラウザーで動作させたい場合は、たとえば JavaScript でプレースホルダーを自分で実装する必要があります。DOM eventsを使用してすべてのinputandtextarea要素を検索し、それらのそれぞれにandハンドラーをdocument.getElementsByTagName追加できます。onfocusonblur

于 2010-08-25T19:52:53.233 に答える
0

わかりました、ブライアンの完璧な答えのおかげで、これが私が思いついたコードです。それを機能させるのに十分な時間がかかりました：

<form>
  <input type="text" name="txtField" value="" placeholder="input your text" />
  <textarea name="areaField" placeholder="input your long text"></textarea>
</form>

<script type="text/javascript">
(function() {
    ie_placeholder(document.getElementsByTagName('input'));
    ie_placeholder(document.getElementsByTagName('textarea'));
    function ie_placeholder (fields) {
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.onfocus = function () {
                if (this.value == this.placeholder) {
                    this.style.color = '';
                    this.value = '';
                }
            };
            field.onblur = function () {
                if (this.value == '' && this.placeholder != null) {
                    this.style.color = 'silver';
                    this.value = this.placeholder;
                }
            };
            field.onblur();
        }
    }
})();
</script>

フォームの最後に入力するだけで問題ありません。そして、お気に入りのサーバー側スクリプトを使用して、HTML5 互換ブラウザーからこれを削除してください。placeholder属性はHTML5 でのみ機能します。

于 2010-08-25T21:25:59.917 に答える