Javascript는 IE 및 Firefox의 캐리지 리턴 이벤트와 호환됩니다
<script> 이벤트) <div class="codebody" id="code82193">{ <br>e = 이벤트 ? 이벤트 :(window.event ? window.event : null) <br>if(e.keyCode==13){ <br>//실행 방법 <br> Alert('Enter가 감지됨'); <br>} <br>} <br></script>
jquery는 IE의 캐리지 리턴 이벤트와 호환됩니다. 및 Firefox
$ ("Enter 누르기 제어").keydown(function(e){
var curKey = e.which;
if(curKey == 13){
$("#이벤트 입력 컨트롤").click();
return false
})
jquery 다중 브라우저 캡처 이벤트 코드 입력
코드 복사
//코드
});
}
});
jquery 기반 버튼 기본 이벤트 입력
여기서는 버튼 버튼을 소개하겠습니다. 기본 캐리지 리턴(입력) 이벤트입니다. submit을 사용할 수 있다면 submit이 캐리지 리턴 이벤트(enter)를 직접 기본값으로 설정할 수 있기 때문에 다음 코드를 볼 필요가 없습니다.
jquery를 통해 코드가 완성되었음을 선언합니다. 실제 컬럼 코드는 제가 직접 작성했는데, 그냥 복사해서 사용하시면 되지만, jquery 패키지를 import 하셔야 합니다. IE와 Firefox를 지원하는 방법이 있으며 확실히 작동할 것입니다. 제가 작업할 때 온라인에서 몇 가지 코드를 발견했는데, 기본적으로 그 중 어느 것도 Firefox를 지원하지 않았습니다. 좋아요, 말도 안되는 소리는 충분히 했습니다. 코드 데모를 시작합니다. 누구나 오류를 수정하고 기술적인 조언을 제공할 수 있습니다. 감사합니다.
코드 복사
< title>Firefox Enter 이벤트는 IE와 IE 모두에서 지원됩니다.
;
이 문제가 해결되었으면 공유해 주세요. .
오늘은 Enter 키로 로그인 양식을 제출하는 기능을 만들었습니다.
코드 복사
코드는 다음과 같습니다:
Firefox에서 실행할 때 오류가 발생했습니다. (공식 매개변수 앞에
인터넷에 따르면 소스 코드를 다시 변경하는 것이 좋습니다.
코드 복사
코드는 다음과 같습니다.
다른 이벤트가 정의되지 않았습니다. 오류가 발생했습니다.
열심히 검색해서 찾았습니다(원문은 다음과 같습니다):
주로 4개 부분으로 나누어집니다
1부: 브라우저 키 이벤트
2부: 호환 브라우저
3부: 코드 구현 및 최적화
4부: 요약
1부: 브라우저 주요 이벤트
js를 사용하여 키 로깅을 구현하는 경우 세 가지 유형의 브라우저 주요 이벤트 유형에 주의해야 합니다. , 즉 keydown, keypress 및 keyup은 각각 onkeydown, onkeypress 및 onkeyup 세 가지 이벤트 핸들에 해당합니다. 일반적인 키 누르기는 keydown, keypress, 키를 놓을 때 keyup 순서로 세 가지 이벤트를 모두 생성합니다.
이 세 가지 이벤트 유형 중 keydown과 keyup은 상대적으로 낮은 수준이고 keypress는 상대적으로 고급입니다. 여기서 소위 고급이란 사용자가 Shift 1을 누르면 키 누르기가 키 이벤트를 구문 분석하고 인쇄 가능한 "!" 문자를 반환하는 반면, keydown 및 keyup은 Shift 1 이벤트만 기록한다는 의미입니다. [1]
단, 키 누르기는 인쇄 가능한 일부 문자에만 유효하지만 F1-F12, 백스페이스, Enter, Escape, PageUP, PageDown 및 화살표 방향 등과 같은 기능 키의 경우에는 작동하지 않습니다. keypress 이벤트는 생성되지 않지만 keydown 및 keyup 이벤트는 생성할 수 있습니다. 그러나 FireFox에서는 기능 키가 키 누르기 이벤트를 생성할 수 있습니다.
keydown, keypress 및 keyup 이벤트 핸들러에 전달된 이벤트 객체에는 몇 가지 공통 속성이 있습니다. Alt, Ctrl 또는 Shift를 키와 함께 누르면 이는 FireFox 및 IE에 공통되는 이벤트의 altKey, ctrlKey 및 ShiftKey 속성으로 표시됩니다.
2부: 호환 가능한 브라우저
브라우저와 관련된 모든 js는 브라우저 호환성 문제를 고려해야 합니다.
현재 일반적으로 사용되는 브라우저는 주로 IE와 Mozilla를 기반으로 합니다. Maxthon은 IE 커널을 기반으로 하며 FireFox와 Opera는 Mozilla 커널을 기반으로 합니다.
2.1 이벤트 초기화
가장 먼저 알아야 할 것은 이벤트를 초기화하는 방법입니다.
function keyDown(){}
document.onkeydown = keyDown ;
브라우저가 이 명령문을 읽으면 키보드의 어떤 키를 누르든 KeyDown() 함수가 호출됩니다.
2.2 FireFox 및 Opera 구현 방법
FireFox, Opera 등의 프로그램 구현은 IE보다 번거롭기 때문에 먼저 여기서 설명하겠습니다.
keyDown() 함수에는 숨겨진 변수가 있습니다. 일반적으로 문자 "e"를 사용하여 이 변수를 나타냅니다.
function keyDown(e)
변수 e는 키 입력 이벤트를 나타냅니다. 어떤 키가 눌렸는지 찾으려면 which 속성을 사용하세요.
e.which
e. which는 키의 인덱스 값을 제공합니다. 인덱스 값을 키의 영숫자 값으로 변환하는 방법에는 다음과 같이 정적 함수 String.fromCharCode()를 사용해야 합니다.
String .fromCharCode(e.which)
위 명령문을 종합하면 FireFox에서 어떤 키를 눌렀는지 알 수 있습니다.
function keyDown(e) {
var keycode = e.which
var realkey = String.fromCharCode( e.which; );
alert("keycode: " keycode " 문자: " realkey);
}
document.onkeydown = keyDown;
2.3 IE 구현 방법
IE 프로그램에는 e 변수가 필요하지 않습니다. e.which 대신 window.event.keyCode를 사용합니다. 키 인덱스 값을 실제 키 값으로 변환하는 방법은 String.fromCharCode(event.keyCode)와 비슷합니다.
function keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode)
alert("키코드: " keycode " 문자:
}
document .onkeydown = keyDown;
2.4 브라우저 유형 결정
위에서 다양한 브라우저에서 주요 이벤트 객체를 얻는 방법을 배웠습니다. , 일부는 이해하기 쉽고 매우 영리한 방법도 있습니다. 먼저 일반적인 방법에 대해 이야기해 보겠습니다. 이는 navigator 개체의 appName 특성을 사용하는 것입니다. , appName은 브라우저 유형을 결정하는 데 사용됩니다. IE 및 Maxthon의 appName은 "Microsoft Internet Explorer"이고 FireFox 및 Opera의 appName은 "Netscape"이므로 비교적 간단한 기능을 가진 코드는 다음과 같습니다.
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode
var realkey = String. fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which); "키코드: " keycode " 문자: " realkey);
}
document.onkeyup = keyUp;
더 간단한 방법은 다음과 같습니다.
function keyUp(e) {
var currKey=0,e=e |event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey)
alert("키 코드: " currKey " 문자: " keyName);
}
document.onkeyup = keyUp;
위의 방법이 더 영리합니다. 간단히 설명하겠습니다.
먼저 e=e||event; this 이 코드는 브라우저 이벤트 객체 획득과의 호환성을 위한 것입니다. js에서 이 코드의 의미는 숨겨진 변수 e가 FireFox 또는 Opera에 있으면 e||event가 e를 반환한다는 것입니다. 숨겨진 변수 e가 IE에 없으면 event가 반환됩니다.
두 번째로, currKey=e.keyCode||e.which||e.charCode; 이 문장은 브라우저 키 이벤트 개체의 키 코드 속성과 호환됩니다(자세한 내용은 3부 참조). IE에는 keyCode 속성만 있는 반면 FireFox에는 which 및 charCode 속성이 있고 Opera에는 keyCode 및 which 속성 등이 있습니다.
위 코드는 브라우저에서만 호환되며, keyup 이벤트 객체를 획득하고, 단순히 키코드와 키문자만 팝업으로 띄워줍니다. 그런데, 키를 누르면 문자키가 모두 나오는 문제가 발생합니다. 대문자로 쓰고, Shift 키를 눌렀을 때 표시되는 문자가 매우 이상하므로 코드 최적화가 필요합니다.
3부: 코드 구현 및 최적화
3.1 키 입력 코드 및 키 입력 이벤트용 문자 코드
키 입력 코드 및 키 입력 이벤트용 문자 코드는 브라우저 간 이식성이 부족합니다. 케이스 이벤트에 따라 키코드와 문자코드의 저장 방식이 다릅니다. 키 이벤트, 브라우저, 키 이벤트 객체 속성 관계는
표와 같습니다.
에서 IE에는 keyCode 속성이 하나만 있으며 그 해석은 이벤트 유형에 따라 다릅니다. keydown의 경우 keyCode는 키 코드를 저장하고, keypress 이벤트의 경우 keyCode는 문자 코드를 저장합니다. IE에는 which 및 charCode 속성이 없으므로 which 및 charCode 속성은 항상 정의되지 않습니다.
FireFox의 keyCode는 항상 0입니다. 시간이 keydown/keyup일 때 charCode=0이 키 코드입니다. 이벤트 키누름이 발생하면 charCode와 해당 값이 동일하며, 문자코드가 저장된다.
Opera에서는 keyCode의 값이 항상 동일합니다. keydown/keyup 이벤트에서는 키를 누를 때 문자 코드를 저장하지만 charCode는 저장하지 않습니다. 정의되어 있으며 항상 정의되지 않습니다.
3.2 Keydown/keyup 또는 keypress
첫 번째 부분에서는 keydown/keyup과 keypress의 차이점을 소개했습니다. keydown 이벤트는 기능 키에 가장 유용합니다. keypress 이벤트는 인쇄 가능한 키에 가장 유용합니다[3].
키보드 로깅은 주로 인쇄 가능한 문자 및 일부 기능 키에 대한 것이므로 keypress가 첫 번째 선택입니다. 그러나 첫 번째 부분에서 언급했듯이 IE의 keypress는 기능 키를 지원하지 않으므로 keydown/keyup 이벤트가 필요합니다. 보충합니다.
3.3 코드 구현
일반적인 아이디어는 keypress 이벤트 객체를 사용하여 키 문자를 얻고, keydown 이벤트를 사용하여 Enter, Backspace 등과 같은 기능 문자를 얻는 것입니다.
코드 구현은 다음과 같습니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
