web-dev-qa-db-ja.com

jQueryを使用して空のテキスト入力を選択する

JQueryを使用して空のテキストボックスを識別する方法可能であれば、セレクタを使用してそれを行いたいと思います。また、これを使用する実際のコードでは、すべてのテキスト入力を選択したくないため、IDを選択する必要があります。

次の2つのコード例では、最初の例では、ユーザーがテキストボックス「txt2」に入力した値を正確に表示しています。 2番目の例では、空のテキストボックスがあることを特定していますが、入力しても空と見なされます。どうしてこれなの？

これはセレクターだけを使用して実行できますか？

このコードは、テキストボックス「txt2」の値を報告します：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    alert($('[id=txt2]').val());
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

このコードは、常にテキストボックス「txt2」を空として報告します。

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    if($('[id^=txt][value=""]').length > 0) {
                        if (!confirm("Are you sure you want to submit empty fields?")) {
                            if (event.preventDefault) {
                                event.preventDefault();
                            } else {
                                event.returnValue = false;
                            }
                        }
                    }
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>
jquerycss-selectors
100
Cros

別の方法

$('input:text').filter(function() { return $(this).val() == ""; });

または

$('input:text').filter(function() { return this.value == ""; });

または

// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! 
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');

Working Demo

デモのコード

jQuery

 $(function() {

  $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

});
191
Russ Cam

独自のセレクターを定義することでもできます。

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

そして、次のようにそれらにアクセスします。

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
26
James Wiseman
$(":text[value='']").doStuff();

？

ところで、あなたの呼び出し：

$('input[id=cmdSubmit]')...

greatlyで簡略化および高速化できます。

$('#cmdSubmit')...
19
cletus

トップランクの投稿で述べたように、以下はシズルエンジンで動作します。

$('input:text[value=""]');

コメントでは、セレクターの:text部分を削除すると、セレクターが失敗することに注意してください。何が起こっているのかと言えば、Sizzleは可能な場合、ブラウザの組み込みセレクタエンジンに実際に依存しているということです。 :textがセレクターに追加されると、非標準のCSSセレクターになるため、Sizzle自体で処理する必要があります。これは、SizzleがソースHTMLで指定された「value」属性ではなく、INPUTの現在の値をチェックすることを意味します。

したがって、空のテキストフィールドをチェックする賢い方法ですが、Sizzleエンジンに固有の動作（ソースコードで定義された属性の代わりにINPUTの現在の値を使用する動作）に依存していると思います。 Sizzleはこのセレクタに一致する要素を返す場合がありますが、document.querySelectorAllはHTMLにvalue=""を持つ要素のみを返します。買い手責任負担。

12
thirdender

@James Wisemanの答えに基づいて、私はこれを使用しています：

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

これは、「本当に」空の入力に加えて、空白のみを含む入力をキャッチします。

例： http://jsfiddle.net/e9btdbyn/

4
Gruffy

$("input[type=text][value=]")

多くのバージョンを試す の後、これが最も論理的であることがわかりました。

textでは大文字と小文字が区別されることに注意してください。

4
user669677

ここには[value=""]のようなものを示唆する多くの回答がありますが、実際に機能するとは思いません。 。 。または少なくとも、使用法に一貫性がありません。同様のことをしようとしていますが、入力された値を持たない特定の文字列で始まるIDを持つすべての入力を選択しています。私はこれを試しました：

$("input[id^='something'][value='']")

しかし、それは機能しません。それらを逆にすることもありません。こちらをご覧ください fiddle 。文字列で始まり値が入力されていないIDを持つすべての入力を正しく選択するために私が見つけた唯一の方法は

$("input[id^='something']").not("[value!='']")

そして

$("input[id^='something']:not([value!=''])")

しかし、明らかに、二重のネガはそれを本当に混乱させます。おそらく、Russ Camの最初の回答（フィルター機能付き）が最も明確な方法です。

3
tandrewnichols

私はお勧めします：

$('input:text:not([value])')
3
TM.

これにより、「txt」で始まるIDの空のテキスト入力が選択されます。

$(':text[value=""][id^=txt]')
1
Cros