자바스크립트 청취자, "키 누름"은 백스페이스를 감지하지 못합니까?
저는 A를 사용하고 있습니다.keypress
청취자 예..
addEventListener("keypress", function(event){
}
하지만 이것은 텍스트를 지우는 백스페이스를 감지하지 못하는 것 같습니다.
이것을 감지하는 데 사용할 수 있는 다른 청취자가 있습니까?
KeyPress 이벤트는 문자(인쇄 가능) 키에 대해서만 호출되고, KeyDown 이벤트는 , , , 등 인쇄 불가능한 키를 포함한 모든 키에 대해서만 호출됩니다.
업데이트:
키를 누르면 키 누름 이벤트가 발생하고 해당 키가 일반적으로 문자 값을 생성합니다.
참고.
.keydown
대신에keypress
.
키보드 이벤트는 다음 순서로 발생합니다.keydown
,keyup
,keypress
백스페이스의 문제는 브라우저가 다시 탐색하는 것일 것입니다.keyup
따라서 당신의 페이지는 볼 수 없을 것입니다.keypress
이벤트성의
keypress
브라우저마다 이벤트가 다를 수 있습니다.
Chrome과 Firefox의 키보드 이벤트(JQuery 바로가기 사용)를 비교하기 위해 Jsfiddle을 만들었습니다.사용하는 브라우저에 따라keypress
이벤트가 트리거되거나 트리거되지 않음 -- 백스페이스가 트리거됩니다.keydown/keypress/keyup
파이어폭스에서만keydown/keyup
크롬으로
단일 키 클릭 이벤트가 트리거됨
크롬으로
keydown/keypress/keyup
브라우저가 키보드 입력을 등록할 때 (keypress
해고됨)keydown/keyup
키보드 입력이 없는 경우(Alt, Shift, Backspace, 화살표 키로 tested)keydown
탭용으로만?
파이어폭스에서
keydown/keypress/keyup
브라우저가 키보드 입력을 등록할 때, 백스페이스, 화살표 키, 탭(여기)도 등록합니다.keypress
입력이 없어도 발화됨)keydown/keyup
알트, 시프트
https://api.jquery.com/keypress/ 에 따르면 다음과 같은 경우가 있기 때문에 놀라운 일은 아닙니다.
참고: 키 누르기 이벤트는 공식 사양에 포함되지 않기 때문에 사용 시 실제 동작은 브라우저, 브라우저 버전 및 플랫폼에 따라 다를 수 있습니다.
키 누름 이벤트 유형의 사용은 W3C(http://www.w3.org/TR/DOM-Level-3-Events/ #event-type-keypress)에서 더 이상 사용되지 않습니다.
키 누르기 이벤트 유형은 참조 및 완전성을 위해 이 규격에 정의되어 있지만 이 규격에서는 이 이벤트 유형의 사용을 권장하지 않습니다.컨텍스트를 편집할 때 작성자는 대신 입력 전 이벤트를 구독할 수 있습니다.
마지막으로, 당신의 질문에 대답하기 위해서 당신은 다음을 사용해야 합니다.keyup
아니면keydown
파이어폭스와 크롬에서 백스페이스를 탐지할 수 있습니다.
여기서 한 번 해보세요.
$(".inputTxt").bind("keypress keyup keydown", function (event) {
var evtType = event.type;
var eWhich = event.which;
var echarCode = event.charCode;
var ekeyCode = event.keyCode;
switch (evtType) {
case 'keypress':
$("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
break;
case 'keyup':
$("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
break;
case 'keydown':
$("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
break;
default:
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>
폼 필드에 있다고 생각하면서 백스페이스를 치는 사람들에게 문제가 생길 경우를 대비해 작성한 내용
window.addEventListener("keydown", function(e){
/*
* keyCode: 8
* keyIdentifier: "U+0008"
*/
if(e.keyCode === 8 && document.activeElement !== 'text') {
e.preventDefault();
alert('Prevent page from going back');
}
});
event.key === "백스페이스"
보다 최신의 훨씬 깨끗한 제품: 사용event.key
. 더 이상 임의의 숫자 코드는 없습니다!
note.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace") {
// Do something
}
});
내 숫자 컨트롤:
function CheckNumeric(event) {
var _key = (window.Event) ? event.which : event.keyCode;
if (_key > 95 && _key < 106) {
return true;
}
else if (_key > 47 && _key < 58) {
return true;
}
else {
return false;
}
}
<input type="text" onkeydown="return CheckNumerick(event);" />
먹어봐.
BackSpace 키 코드는 8입니다.
대신 입력 이벤트 전에 키 업/키 다운/중 하나를 사용합니다.
이 기준에 따라 키 누르기는 더 이상 권장되지 않습니다.
문자 값을 생성하는 키를 누르면 키 누름 이벤트가 발생합니다.문자 값을 생성하는 키의 예로는 알파벳, 숫자 및 구두점 키가 있습니다.문자 값을 생성하지 않는 키의 예로는 Alt, Shift, Ctrl 또는 Meta와 같은 한정자 키가 있습니다.
입력 전에"를 사용하는 경우 브라우저 호환성에 주의해야 합니다."입력 전"과 다른 두 가지의 차이점은 입력 값이 변경되려고 할 때 "입력 전"이 발화되므로 입력 값을 변경할 수 없는 문자의 경우에는 발화되지 않습니다(예: shift, ctr, alt).
저도 같은 문제가 있었는데 키업으로 해결이 되었습니다.
저는 노력하고 있었습니다.keydown
뒷공간은 포착되지 않았습니다전환하기keyup
나를 위해 일했습니다.
addEventListener("keyup", function(event){
}
참고로, 누군가와 함께 사용하고 있는 경우..on
동적으로 생성된 컨텐츠의 경우.
$("body").on( "keyup", ".my-element", function(evt) {
// Do something
});
언급URL : https://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace
'programing' 카테고리의 다른 글
플랫폼별 새 라인에 대한 Node.JS 상수? (0) | 2023.10.27 |
---|---|
레일 데이터베이스 연결 풀 작동 방식 (0) | 2023.10.27 |
팬더를 사용하여 새 기둥에 증분 숫자를 추가하는 방법 (0) | 2023.10.27 |
동일한 표에 있는 다른 두 열의 연접 관계로 열을 업데이트하는 방법 (0) | 2023.10.27 |
jquery datable의 ajax call에서 매개변수를 게시하는 방법 (0) | 2023.10.27 |