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

103

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>
jquery  css-selectors 
— Cros
소스
6
'[value =]'가 사용자 입력을 무시하고 소스에있는 내용 만 확인하는지 아는 사람이 있습니까?
— Cros
이 작업에 대해 : empty 필터가 만들어진 것이 맞습니까? $ ( 'input [type = text] : empty'). doStuff ();
— Antony Carthy
1
문서 읽기 -docs.jquery.com/Selectors/empty . 빈은 자식이없고 값이없는 요소를위한 것입니다
— Russ Cam

답변:

196

또 다른 방법 

$('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);
  });

});
— Russ Cam
소스
나를 위해 : if ($ ( '[id ^ = txt]'). filter (function () {return $ (this) .val () == "";}). length> 0) {alert ( 'WARNING' ); }
— Cros
마지막 예와 두 번째 예가 다른 점은 무엇입니까? 실제 코드에서는 모든 텍스트 입력을 보지 않기 때문에 id를 선택해야합니다. 두 번째 예는 사용자 입력으로 작동하지 않지만 귀하의 것은 작동합니다.
— Cros
1
작동하는 선택기는 선택기의 : text와 관련이있는 것 같습니다. 작동하는 데모를 열고 URL에 / edit를 추가하면 사용 된 선택기로 재생할 수 있습니다. : text를 제거하면 $ ( 'input [value = ""]')를 사용해도 선택기가 더 이상 올바르게 작동하지 않습니다. Sizzle 선택기 엔진의 버그 일 수 있지만 조사 할 시간이 없습니다. 그건 그렇고, 나는 선택기에서 요소 태그를 사용하는 것이 좋습니다. 그렇지 않으면 각 요소가 속성 값과 일치하는지 확인하기 위해 검사됩니다.
— Russ Cam
3
좋은 대답입니다! 그러나 입력 요소의 값이 문자 그대로 null (공백!)인지 확인하고 싶을 수도 있습니다. 이 경우 빈 공간을 잘라내십시오. 이런 식으로 뭔가$('input:text').filter(function() { return $(this).val().trim() == ""; });
— 바이 니스 프라
31
요소가 있지만 값 속성 [value=""]이 없으면 값 속성을 찾지 못하므로 선택기가 작동하지 않습니다. 그러나 .filter 기술은이 시나리오에서 작동합니다.
— AaronLS
26

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

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

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

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
— 제임스 와이즈먼
소스
나는 성능에 대해 약간 걱정됩니다. 그러나 아마도 가장 쉬운 대답 일 것입니다!
— aliqandil
19 
$(":text[value='']").doStuff();

?

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

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

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

$('#cmdSubmit')...
— 클레 투스
소스
닫는 대괄호가 누락 된 것 같습니다. jQuery의 일반적인 소스가 예상대로 작동하지 않고 발견하기 어렵습니다. :-/
— OregonGhost 2009-08-19
첫 번째 예는 기본적으로 작동하지 않는 예입니다. 사용자가 입력 필드에 텍스트를 추가했는지 알고 싶습니다. 귀하의 예제는 이것을 수행하지 않습니다.
— Cros
나는 서두르고, 당신의 예는 효과가있는 것 같지만, 내가해야 할 이드를 선택하지 않았습니다.
— Cros
"input [id = ..]"를 수행하는 것은 "#"과 동일하지 않습니다. # 객체의 배열을 제공하지 않습니다.
— dev4life
@ dev4life 같은 ID를 가진 페이지에서 여러 요소를 사용하는 경우 잘못하고있는 것입니다
— Sean Kendle
12

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

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

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

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

— 세 번째
소스
5

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

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

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

4

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

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

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

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

— Gruffy
소스
3

다음을 추천합니다.

$('input:text:not([value])')
— TM.
소스
2
[attribute]는 값이 있는지 여부가 아닌 속성의 존재를 찾기 때문에 작동하지 않습니다. <input value="">여전히 일치합니다.
— Ben Hull
{{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}Laravel이 비어있는 경우 'value'속성을 추가하지 않기 때문에 양식 필드 (예 :)를 생성하기 위해 Laravel을 사용할 때 도움이되었습니다 . 그래서 나는 $('input:text:not([value]):visible:enabled:first');첫 번째로 보이는 빈 텍스트 입력 필드를 찾기 위해 사용했습니다.
— Ryan
3

여기에 같은 것을 제안하는 많은 답변이 [value=""]있지만 실제로 작동하지 않는다고 생각합니다. . . 또는 적어도 사용량이 일관되지 않습니다. 비슷한 작업을 시도하고 입력 된 값이없는 특정 문자열로 시작하는 ID가있는 모든 입력을 선택합니다. 나는 이것을 시도했다 :

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

하지만 작동하지 않습니다. 그것들을 뒤집는 것도 아닙니다. 이 바이올린을 참조하십시오 . 문자열로 시작하고 입력 된 값없이 ID가있는 모든 입력을 올바르게 선택하는 유일한 방법은

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

과

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

그러나 분명히 이중 네거티브는 그것을 정말로 혼란스럽게 만듭니다. 아마도 Russ Cam의 첫 번째 답변 (필터링 기능 포함)이 가장 명확한 방법 일 것입니다.

— tandrewnichols
소스
1

"txt"로 시작하는 ID를 가진 빈 텍스트 입력을 선택합니다.

$(':text[value=""][id^=txt]')
— Cros
소스
0

모든 비교에 대해 JQuery 객체를 만드는 것은 효율적이지 않으므로 다음을 사용하십시오.

$.expr[":"].blank = function(element) {
    return element.value == "";
};

그런 다음 다음을 수행 할 수 있습니다.

$(":input:blank")
— 타이어
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.