div 범위 및 기타 요소가 키보드 이벤트에 응답하도록 만드는 방법 작업 가이드

div 범위 및 기타 요소가 키보드 이벤트에 응답하도록 만드는 방법 작업 가이드_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:48:15

원래의

1187명이 탐색했습니다.

요즘 일하다가 문제가 생겨서 구글링해서 해결했는데 그냥 영어로 번역해서 더 많은 분들이 이해하실 수 있게 했습니다
번역은 다음과 같습니다. 🎜>DIV 내에 편집 가능한 div와 편집 가능한 범위가 있습니다.
테스트 JS 코드는 다음과 같습니다.

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

$(function() 
{ 
$('#someid').keypress(function( event){alert('test');}) 
}); 

다음은 테스트 HTML 코드입니다 :

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

 다음과 같이 편집 가능합니다.Some TEXT 

브라우저에서 테스트하면 Some TEXT에서 키를 눌렀을 때 '테스트' 팝업 상자가 나타나지 않는 것을 볼 수 있습니다. 이 문제의 원인은 이벤트가 범위의 상위 노드 div에서 전송되어 범위가 트리거되지 않기 때문이라는 것을 알고 있습니다. 물론 스팬에 포커스가 없어서 발생하는 문제이기도 하므로 해결 방법을 찾는 데 도움을 주셨으면 합니다.

마지막으로 몇몇 친절한 사람들이 이 문제를 해결하는 데 도움을 주었습니다
귀하의 문제에 대한 솔루션 코드를 http://jsfiddle.net/gaby/TwgkC/3/에 제출했는데 제대로 작동합니다
FF에서는 Opera , Chrome, Safari, IE8..
에서 테스트됨 #someid는 키 누르기를 트리거하기 위해 포커스를 얻어야 합니다. 요소가 생성된 후 코드가 즉시 포커스를 얻으려면 .focus() 메서드를 사용하세요

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

function AppendSpan()

{ 
$('# mydiv') .append('Some TExt') 
//그런 다음 삽입된 범위에서 키 누르기 이벤트를 처리하고 싶습니다 
$( '#someid').keypress(function(event){ 
//여기에서 작업 수행 
alert(this.id); 
}).focus();// 포커스를 요소를 추가하면 .. 
} 

 
추가: 

이벤트를 트리거하는 두 가지 방법(실제로 contenteditable 속성을 사용해야 함), 허용할 수 있는지 확실하지 않음 이 상황
1. 편집 가능한 범위를 다른 외부 레이어에 래핑하고 해당 속성을 contenteditable="false"로 설정합니다.
demo js:

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

function AppendSpan()

{ 
$('#mydiv').append(' Some TExt'); 
//그런 다음 삽입된 범위에서 키 누르기 이벤트를 처리하고 싶습니다. 
$ ('#someid').keypress(function(event){alert('test');}) 
} 
$(function() 
{ 
$('# mydiv') .keypress(function(event){AppendSpan();}); 
}) 

 
데모 html: 

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

편집 가능:

2. 스팬의 키보드 이벤트를 트리거해야 하는 경우 #mydiv를 편집 불가능한 상태로 두세요.
demo js:

코드 복사 코드는 다음과 같습니다. function AppendSpan()

{

$('# mydiv').removeAttr('contenteditable') .append('Some TExt') 
//그런 다음 키 누르기를 처리하고 싶습니다. 삽입된 범위의 이벤트 
$( '#someid').keypress(function(event){alert('test');}) 
} 
$(function() 
{ 
$('#mydiv').keypress(function(event){AppendSpan();}) 
}) 

 
데모 html: 

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

>다음과 같이 편집 가능: