0

「テキストエリア」に「入力」ボックスのようなデフォルトメッセージを含めるようにjqueryを取得するにはどうすればよいですか。私はjQueryに非常に慣れていないため、これを理解できないようです。これを尋ねる必要があることをお詫び申し上げます。

私は、非常に単純な jQuery 機能をサイトに組み込むことを目指して、多くの調査を行ってきました。余分な js フットプリントを最小限のスクリプトに制限しようとしています。大規模なプラグイン スクリプトではありません。私の研究では、そうすることで多くの助けが得られました.

作成できる限り意図したとおりに動作しているカスタム検索クエリがいくつかあります。これらの小さな検索ボックスでは、誰かが (フォーカスして) ボックスに入力するまで、「入力」の内容を「検索」のようなカスタム メッセージに置き換える小さなスクリプトを使用します。この小さなスクリプトは美しく機能します。しかし、同じスクリプトでコメント領域でも同じことをしたいと思います。

$('#outputList, #outputList2').removeClass('no-display');
$(document).on("blur", "#inputBox, #inputBox2, #commentArea", function(){
    var default_value = $(this).attr("rel");
    if ($(this).val() === ""){
        $(this).val(default_value);
    }
}).on("focus", "#inputBox, #inputBox2, #commentArea", function(){
    var default_value = $(this).attr("rel");
    if ($(this).val() === default_value){
        $(this).val("");
    }
});

基本的なhtmlは以下の通りです。コメント欄に…

<textarea name="comment" id="commentArea" class="input-block-level" rows="6" rel="Leave a Comment…"></textarea><!--text between the text areas tags does not get removed -->

検索ボックスに...

<input type="text" id="inputBox" value="Search for..." rel="Search for..." />
<ul id="outputList" class="align-left no-display">
    <!-- list to be filtered -->
</ul>

<input type="text" id="inputBox2" value="Search for..." rel="Search for..." />
<ul id="outputList2" class="align-left no-display">
   <!-- list to be filtered -->
</ul>

ここで私のjsFiddleで見られるように。ロードするとすぐに、検索ボックスにデフォルトとして値フィールドがあります。フォーカスを失うと、rel フィールドに移動します。

textarea は、フォーカスを失ったときに rel フィールドを取得しますが、開始する値フィールドでは機能しません。

HTML によるプレースホルダーは認識していますが、検索ボックスと同じ形式にして同じように動作させたいと考えています。これは可能ですか？

私は検索して多くの回答を見つけましたが、コメントボックスにデフォルトのフィールドがロード時に機能しているようには見えません。ご協力いただき、ありがとうございました。

それが役立つ場合、私は次のことを実行しています。Wordpress 3.5.1、jQuery 1.9.1、jQuery UI 1.9、php 5.4、MySql Ver 14.14 Distrib 5.5.30。

4

2 に答える 2

2

私にはうまくいくようです。省略記号を間違って入力したか、不要な空白があった可能性があります。default_value比較のためにトリミングすることもできます。

代わりに、最新のブラウザーで JS なしで動作するrelを使用することもできます。placeholder

http://jsfiddle.net/ehwRU/1/

于 2013-04-25T03:14:34.433 に答える
1

フィドルを少し更新して簡素化しました：http://jsfiddle.net/ehwRU/3/ 

$("#inputBox, #inputBox2, #commentArea").each(function () {    

    var default_value = $(this).attr("rel");

    $(this).val(default_value)

        .blur(function () { 
            if (!$(this).val().length) $(this).val(default_value); 
         })

        .focus(function () { 
            if ($(this).val() === default_value) $(this).val(""); 
         });
});

現在、期待どおりに動作しているようです??

于 2013-04-25T03:26:35.470 に答える