BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] jQueryを使用した空のテキスト入力の選択

2022-12-08 23:59:37

質問

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>

どのように解決するのですか？

別の方法 

$('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=""]');

動作デモ

デモのコード

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);
  });

});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します