javascript_기본 지식에서 onkeyup과 onkeydown의 차이점 소개-JS 튜토리얼-php.cn

집

javascript_기본 지식에서 onkeyup과 onkeydown의 차이점 소개

May 16, 2016 pm 05:34 PM

어제 입력을 제한하기 위해 동적으로 생성된 마지막 연, 월, 일 드롭다운 상자와 텍스트 상자를 작성하던 중 문제가 발생했습니다. 당연히 onkeydown 이벤트가 생각났고, value.length의 메소드를 계산하고, 코드를 보세요

코드를 복사하세요 코드는 다음과 같습니다.

 
 moto.onkeydown=function(){ 
var curlen= this.value.length; 
shuru.innerHTML=curlen; 🎜>shuru2.innerHTML= (200-curlen); 
if(curlen>= 200){ 
this.value=this.value.substring(0,200) 
curlen
shuru; .innerHTML=200; 
shuru2.innerHTML=0; 
return false; 
} 
} 

 

텍스트를 입력한 결과 단어 수가 잘못된 것으로 나타났습니다. .4자를 입력했는데도 단어수가 0으로 나오더군요

javascript_기본 지식에서 onkeyup과 onkeydown의 차이점 소개

오랜 고민 끝에 onkeydown을 onkeyup으로 바꿨더니 괜찮네요

javascript_기본 지식에서 onkeyup과 onkeydown의 차이점 소개

확인해 보니 두 이벤트가 다른 것으로 나타났습니다
onkeydown을 누르면 실행됩니다. 네, 이때는 키 값이 출력되지 않습니다. onkeyup은 버튼을 떼면 실행됩니다. 이때 키 값은 이미 사용 가능합니다. 예를 들어 이 두 이벤트를 입력창에 추가하면

코드를 복사하세요 코드는 다음과 같습니다.

<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id="test2" onkeyup ="alert(this.value);"/>

두 가지 다른 실행 결과를 보면 이해가 되실 겁니다!

코드 복사 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>여기에 제목 삽입</title> 🎜>&lt ;body> 
<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id=" test2" onkeyup ="alert(this.value);"/> 
</body> 
</html> 

 
onkeydown은 키를 누를 때 트리거됩니다. 값이 출력되지 않습니다. 
버튼을 떼면 Onkeyup이 실행됩니다. 이때 키 값은 이미 사용 가능합니다. 

얼마나 길게 눌러도 상관없습니다. 예를 들어 입력창에 이 두 이벤트를 추가하면

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.