入力およびテキストアレアのフェージング値

Question

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

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

また、タイトルフローの「検索」とは異なり、タイトルはフィールド値としてフェードアウトして戻ってきます（上部には、フェードアウトするだけです）。

JavaScriptを考え出して使用できました onblur と onfocus, 、しかし、それは面倒であり、私は不必要なことを願っています。できれば、特定のファイル内の入力とテキストアレアごとに単一の関数のみを設定するので、私がする必要があるのはその設定だけです title.

最初の質問: ：これの名前は何ですか？

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

Answer 1

新しいブラウザでのみ動作している場合は、 placeholder 属性 テキストフィールドでは、焦点を合わせると消えるプレースホルダーを提供します。あなたはいくつかの情報を見つけることができます HTML5に飛び込みます.

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

古いブラウザで動作させたい場合は、たとえばJavaScriptでプレースホルダーを自分で実装する必要があります。あなたはあなたのすべてを見つけることができます input と textarea 使用する要素 document.getElementsByTagName 追加します onfocus と onblur それぞれを使用するハンドラー DOMイベント.

Answer 2

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

<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互換性のあるブラウザからこれを削除してください。 プレースホルダー 属性はHTML5で機能します.