input 최소글자 제한 문의드립니다.
본문
이전에 문의를 했었는데
잘안되어서요 ㅠ
폰번호를 받고 있는데
중간에 4자 이하로 숫자를 입력하면
자바스크립트로 체크를 하려 합니다.
<script type="text/javascript">
function validate(element,min,max) {
var len = element.value.length ;
if ((len<min)||(len>max)) {
alert(min + '자 이상 ' + max + '자 이하로 입력해야 합니다' ) ;
element.style.borderColor="#FF0000";
// 입력 필드의 경계선을 빨강으로 설정함
element.focus();
// 입력 필드로 포커스를 이동
}
else {
element.style.borderColor="#ffffff";
// 입력 필드의 경계선을 흰색으로 설정
}
}
</script>
<input type="text" id="wr_3" name="wr_3" maxlength="4" onblur="validate(this,3,4);">
<input type="text" id="wr_5" name="wr_5" maxlength="4" onblur="validate(this,3,4);">
이렇게 했는데..
체크는 하는데
경고창이 뜬 후 확인을 누르면
해당 input으로 가지않고
경고창의 확인을 눌러도 계속 경고창이 무한으로 떠버리네요;
element.focus(); 다음에
return false; 를 추가하고
onblur="return validate(this,3,4);"
이렇게 고쳐도 증상이 똑같습니다...
고수님들의 조언 부탁드립니다. ㅠ
답변 1
코드 문제이기도 하고 아니기도 합니다.
위 로직상
onblur 에서 코드가 작동하는데.
validate() 함수로 오류가 확인되면 그때 경고창이 뜨고나면 종료되어야 하죠
그런데 validate() 함수가 다시 포커스를 오류난 입력난으로 가져가고
님은 그칸 말고 다른칸 입력하려고 다른곳에 포커스를 맞추고
그러면 또 onblur 이벤트 발생해서 validate() 함수 실행되고 포커스 원래 입력칸으로 환원되고
다시 또 다른곳으로 포코스 맞추고....
무한반복이네요.
두번째 칸에 3자나 4자 입력하면 끝나요. 조건이 충족되니...
결국 문제는 onblur 이벤트에 함수를 실행시키는 것이 되네요.
위 코드중 element.focus(); 를 주석처리하시면 되요. 그러면 포커스를 강제로 가지가지 않게되죠.
