[jquery] jQuery를 사용하여 빈 텍스트 입력 선택

Program / 글쓴이

jQuery를 사용하여 빈 텍스트 상자를 어떻게 식별합니까? 가능한 경우 선택기를 사용하여 수행하고 싶습니다. 또한 이것을 사용하려는 실제 코드에서는 모든 텍스트 입력을 선택하고 싶지 않기 때문에 id를 선택해야합니다.

다음 두 코드 예제에서 첫 번째 코드는 사용자가 텍스트 상자 “txt2″에 입력 한 값을 정확하게 표시합니다. 두 번째 예는 빈 텍스트 상자가 있음을 식별하지만 여기에 입력해도 여전히 비어있는 것으로 간주합니다. 왜 이런거야?

선택 자만 사용하여 수행 할 수 있습니까?

이 코드는 텍스트 상자 “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);
  });

});

답변

자체 선택자를 정의하여 수행 할 수도 있습니다.

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

그리고 다음과 같이 액세스합니다.

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

답변

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

?

그건 그렇고, 당신의 전화 :

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

다음을 사용하여 크게 단순화하고 속도를 높일 수 있습니다 .

$('#cmdSubmit')...

답변

최상위 게시물에서 언급했듯이 다음은 Sizzle 엔진에서 작동합니다.

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

주석 :text에서 선택기 부분 을 제거 하면 선택기가 실패 한다는 사실이 언급되었습니다 . 나는 무슨 일이 일어나고 있는지 Sizzle이 실제로 가능하면 브라우저의 내장 선택기 엔진에 의존한다는 것입니다. :text선택기에가 추가 되면 비표준 CSS 선택자가되므로 Sizzle 자체에서 처리해야합니다. 이는 Sizzle이 소스 HTML에 지정된 “value”속성 대신 INPUT의 현재 값을 확인 함을 의미합니다.

따라서 빈 텍스트 필드를 확인하는 현명한 방법이지만 Sizzle 엔진에 특정한 동작 (소스 코드에 정의 된 속성 대신 INPUT의 현재 값을 사용하는 동작)에 의존한다고 생각합니다. Sizzle은이 선택자와 일치하는 요소를 반환 할 수 있지만 HTML에있는 document.querySelectorAll요소 만 반환합니다 value="". 주의 사항.

답변

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

많은 버전을 시도한 후 이것이 가장 논리적이라는 것을 알았습니다.

참고 text대소 문자를 구분합니다.

답변

@James Wiseman의 답변을 바탕으로 다음을 사용하고 있습니다. 

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

이것은 ‘진짜’비어있는 것 외에도 공백 만 포함하는 입력을 포착합니다.

예 : http://jsfiddle.net/e9btdbyn/

답변

다음을 추천합니다.

$('input:text:not([value])')