jQuery를 사용하여 빈 텍스트 입력 선택
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이 이 선택기와 일치하는 요소를 반환할 수 있지만,document.querySelectorAll다음을 포함하는 요소만 반환합니다.value=""경고 메시지가 나타납니다.
$("input[type=text][value=]")
많은 버전을 시도해 본 결과 이것이 가장 논리적이라는 것을 알게 되었습니다.
참고:text대소문자를 구분합니다.
여기에 다음과 같은 것을 제안하는 많은 답이 있습니다.[value=""]하지만 저는 그것이 실제로 효과가 있다고 생각하지 않습니다. 적어도, 사용법은 일관적이지 않습니다.저는 입력된 값이 없는 특정 문자열로 시작하는 ID로 모든 입력을 선택하여 비슷한 작업을 수행하려고 합니다.시도해 봤습니다.
$("input[id^='something'][value='']")
하지만 효과가 없습니다.그들을 되돌리는 것도 아닙니다.이 바이올린을 보세요.입력한 값 없이 문자열로 시작하는 ID로 모든 입력을 올바르게 선택하는 방법은 다음과 같습니다.
$("input[id^='something']").not("[value!='']")
그리고.
$("input[id^='something']:not([value!=''])")
하지만 분명히 이중 부정은 그것을 정말 혼란스럽게 만듭니다.아마도 러스 캠의 첫 번째 답변(필터링 기능 포함)이 가장 명확한 방법일 것입니다.
@James Wiseman의 대답을 바탕으로, 저는 이것을 사용하고 있습니다.
$.extend($.expr[':'],{
blank: function(el){
return $(el).val().match(/^\s*$/);
}
});
이렇게 하면 '진정으로' 비어 있는 입력 외에 공백만 포함된 입력도 잡힙니다.
예: http://jsfiddle.net/e9btdbyn/
다음을 추천합니다.
$('input:text:not([value])')
이렇게 하면 ID가 "txt"로 시작하는 빈 텍스트 입력이 선택됩니다.
$(':text[value=""][id^=txt]')
모든 비교에 대해 JQuery 개체를 만드는 것은 효율적이지 않으므로 다음을 사용합니다.
$.expr[":"].blank = function(element) {
return element.value == "";
};
그러면 다음을 수행할 수 있습니다.
$(":input:blank")
언급URL : https://stackoverflow.com/questions/1299424/selecting-empty-text-input-using-jquery
'programing' 카테고리의 다른 글
| 쉼표로 구분된 값으로 두 테이블 결합 (0) | 2023.08.23 |
|---|---|
| 도커 1.9+에서 명명된 볼륨의 내용을 나열하는 방법은 무엇입니까? (0) | 2023.08.23 |
| 셀 값을 기준으로 전체 행 색상 지정 (0) | 2023.08.23 |
| 각도 6 입력 키에 입력 추가 (0) | 2023.08.23 |
| Jenkins에서 PowerShell 스크립트를 작업으로 실행하는 방법 (0) | 2023.08.23 |