JQuery에서 keyUp과 keyDown의 차이점에 대한 자세한 설명
- 黄舟원래의
- 2017-06-27 13:39:311625검색
이 글은 주로 JQuery에서 keyUp과 keyDown의 차이점에 대한 자세한 분석과 소개를 제공합니다. 도움이 필요한 친구들이 와서 참고하면 됩니다.
정의 및 사용법
완전한 키입니다. 누르는 과정은 두 부분으로 나누어집니다: 1. 버튼이 눌려집니다. 2. 버튼이 해제됩니다.
keydown 이벤트는 버튼을 누를 때 발생합니다.
keydown() 메서드는 keydown 이벤트를 트리거하거나 keydown 이벤트가 발생할 때 실행할 함수를 지정합니다.
코드는 다음과 같습니다.
<html>
<head>
<script type="text/
javascript
" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
$("input").keydown(function(){
$("input").css("
background-color
","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>
우리 모두 알고 있듯이 jquery는 많은 이벤트 상호 작용 방법을 캡슐화하며 여기에 언급된 문제는 기본 js에도 존재합니다.
Keyup은 사용자가 키를 눌렀을 때만 실행됩니다. 이는 전체 키 누르기 과정의 마지막 단계이므로 왼쪽에 입력하고 오른쪽에 동기화하는 과정에서 매우 유용합니다. . 대표적인 예가 이메일 편집 미리보기 적용이다.
코드는 다음과 같습니다:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#t1').live('keyup', function() {
$('#v1').text($(this).val());
});
$('#t2').live('keydown', function() {
$('#v2').text($(this).val());
});
$('#t3').live('keypress', function() {
$('#v3').text($(this).val());
});
});
</script>
</head>
<body>
<textarea id="t1"></textarea>
<p id="v1">
</p>
<textarea id="t2"></textarea>
<p id="v2">
</p>
<textarea id="t3"></textarea>
<p id="v3">
</p>
</body>
</html>
여기에는 세 가지 이벤트가 각각 적용됩니다. 그 중 t1은 v1과 완전히 동기화될 수 있는 반면, keypress와 keydown에는 항상 마지막 문자가 없습니다. 이는 이 세 가지 이벤트의 트리거링이 다음과 같다는 것을 보여줍니다. 작은 차이점은 키를 눌렀을 때 키다운이 실행되고 최종 입력 결과를 얻을 수 없다는 점입니다. 키누름의 경우에도 마찬가지입니다.
예: keydown은 텍스트 상자에 바인딩되어 있으며 클릭할 때마다 이벤트가 트리거됩니다. 텍스트 상자의 값을 가져온 후 마지막 작업 당시의 텍스트 상자 내용이 항상 인쇄됩니다.
keydown 작업 후 이벤트가 발생했지만 값이 텍스트 상자에 표시되지 않았기 때문에 이러한 유형의 작업을 수행하려면 텍스트 상자의 값을 얻기 전에 keyup으로 완전한 키업이 필요합니다.
keydown 및 keypress는 키보드 제어를 통해 페이지와 같은 기능을 구현하는 데 더 적합합니다.
키보드에서 키를 클릭하세요:
코드는 다음과 같습니다:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("p").html("Key: " + event.which);
});
});
</script>
</head>
<body>일부 문자를 자유롭게 입력하세요: 22e1bb649e3e439c82b64204a5f95e3f
e388a4556c0f65e1904146cc1a846bee텍스트를 입력할 때 위의 상자, 아래의 p에 키 시퀀스 번호가 표시됩니다. 94b3e26ee717c64999d7867364b1b4a3
7493e18ec8d2afde690a0696fdaf5e59
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
위 내용은 JQuery에서 keyUp과 keyDown의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!