2011-05-05 4 views
2

"foo"에서 "foo bar"로 돌아가는 ajax 스크립트 (수정할 수 없음)에 따라 클래스가 동적으로 변경되는 양식 내에 입력 필드가 있습니다. "foo". 필드의 스타일을 수정하고 싶습니다. 길이가 0보다 큰 경우 값에 "nid"가 포함되지 않고 클래스가 "막대"가 아닙니다. 첫 번째 아이디어는 "foo"때까지 입력 필드의 클래스가 "bar"일 때마다 호출되는 setTimeout을 갖는 것이 었습니다. 하지만 난, 나 그것을 수행하는 방법에 ...조건이 참이 될 때까지 setTimeout을 호출하십시오.

답변

1

사용 field

+1

대답은 3 가지 조건 중 하나에 대해서만 응답합니다.»길이가 0보다 큰 필드의 스타일을 수정하고 싶습니다. 값에 "nid"가없고 클래스가 "bar"가 아닙니다.«. 특히 계급 문제는 내 마음을 혼란스럽게한다. – idle

2

쉬운 일이 있다면 잡기 위해 요소에 대한 변경 또는를 keyDown 이벤트를 결합하는 것입니다 입력 keyup 사건이 좋습니다 여부를 알 수없는 필드의 내용이 일치합니다.

일치하는 경우 fx baz 클래스를 추가하십시오. 일치하지 않으면 해당 클래스를 제거하십시오.

그러면 CSS로 요소의 스타일을 지정할 수 있습니다. baz 클래스의 규칙보다 우선 적용될 클래스 bar으로 규칙을 만드십시오.

0

괜찮습니다. 또는 반복적으로 실행되는 setInterval을 사용하고 조건이 충족되면 clearInterval을 호출 할 수 있습니다.

+0

꽤 좋은 소리. 어떻게해야합니까? – idle

0

사용자 입력을 감지하기 위해 my jQuery plugin을보고 싶을 수 있습니다.

$("#myInput").input(function() { 
    var $this = $(this), val = this.value; 
    if (val.length && val.indexOf("nid") === -1 && !$this.hasClass("bar")) 
     $this.css("color", "red"); 
    else 
     $this.css("color", "green"); 
}); 
: 그것은 그 플러그인을 사용하는 등

& 낙하, 드래그, 키보드, 맞춤법 수정, 붙여 넣기 입력을 감지 할 수 있도록, 당신의 코드는 다음과 같이 보일 수있는 모든 주요 브라우저에 걸쳐 HTML5 oninput 이벤트를 정규화

근무 데모 : http://jsfiddle.net/hVDP8/

oninput는 새 값이 이전 코드 실행으로 타이머 또는 onkeyup 이벤트를 사용 비해 많은 장점을 가지고 있습니다 화면에 그려져있다. 사실, 그것은 이런 유형의 상황에 완벽합니다.

관련 문제