2011-01-04 3 views
2

나의 구체적인 사용 사례는 기본적으로 편집 가능한 iframe 인 WYSIWYG 편집기를 사용한다는 것입니다. 그러나 사용자에게는 표준 발행 텍스트 영역처럼 보입니다. 내 문제는 필자는 (인식 된) 탭 인덱스에서이 편집기의 전후에있는 입력을 가지고 있으며 사용자가 WYSIWYG 편집기를 사용하기 위해 탭 (또는 자신이 선택한 플랫폼에서 이에 상응하는 키)을 누를 수 있기를 바란다. 그가 이전 요소와 Shift-tab에있을 때, 그는 후자의 요소에 있습니다.탭 인덱스 스위치가 트리거 될 때 발생하는 JavaScript 이벤트가 있습니까? (TABINDEX는 IFRAME의 입력에 대해 작동하지 않습니다.)

키 이벤트를 사용하여 위조 될 수 있고 탭 키가 눌 렸는지 여부를 확인할 수 있지만 더 좋은 방법이 있는지 궁금합니다.


UPDATE. treeface는 주석의 실제 문제를 명확히했다.

문제 : 보통의 경우

, 당신은, (이메일 형태로) "제목"입력 필드에서 탭 이동, 초점 땅을 것을 제어 할 <input> 요소의 "TABINDEX"속성을 사용할 수 있습니다 전자 메일의 "본문"입력 필드에 입력하십시오. 이는 두 입력 필드의 "TABINDEX"속성에 올바르게 정렬 된 값을 할당하여 간단하게 수행됩니다.

문제는 TABINDEX 특성은 동일한 프레임 내의 요소 만 주문한다는 것입니다. 따라서 "Body"입력 필드가 실제로 IFRAME 내부에있는 경우 TABINDEX 순서를 사용하여 IFRAME에서 직접 "Body"로 상위 프레임의 "Subject"를 탭 해제 할 수 없습니다.

답변

3

관련 입력 요소의 onfocus/onblur 이벤트로 원하는 동작 (아마도 TAB 키를 감지하는 것보다 문제가 적음)을 에뮬레이션 할 수 있습니다. 이렇게하면 TAB이나 클릭 또는 FireFox AddOn을 통해 사용자가 편집기 입력에 어떻게 접근했는지 신경 쓰지 않아도 ID/이름/#으로 입력 요소로 이동할 수 있습니다 (거의 특정 같은 추가 기능이 존재합니다 :)


UPDATE합니다. OP가 의견에서 문제를 명확히했습니다.

문제 : 보통의 경우

, 당신은, (이메일 형태로) "제목"입력 필드에서 탭 이동, 초점 땅을 것을 제어 할 <input> 요소의 "TABINDEX"속성을 사용할 수 있습니다 전자 메일의 "본문"입력 필드에 입력하십시오. 이는 두 입력 필드의 "TABINDEX"속성에 올바르게 정렬 된 값을 할당하여 간단하게 수행됩니다.

문제는 TABINDEX 특성은 동일한 프레임 내의 요소 만 주문한다는 것입니다. 따라서 "Body"입력 필드가 실제로 IFRAME 내부에있는 경우 TABINDEX 순서를 사용하여 IFRAME에서 직접 "Body"로 상위 프레임의 "Subject"를 탭 해제 할 수 없습니다.

SOLUTION : 상위 프레임에서

<INPUT> 요소를 생성한다. 보이지 않거나 (예 : CSS 또는 크기 1x1로 작성) name/id가 "Body_clone"이고 TABINDEX 속성 값이 "Subject"필드의 TABINDEX 다음에옵니다. 또한 IFRAME 안에 "Body"입력 요소를 찾고 해당 요소에 focus()을 호출하는 onFocus 핸들러도 있습니다.

"Body_clone"처럼 IFRAME에서 "Subject_iframe_clone"및 "After-body_iframe_clone"입력 요소를 만들어 IFRAME "Body"요소에서 탭/시프트 탭을 사용하여 동일한 작업을 수행 할 수 있습니다.

+0

@DVK : 처음에는 생각 했었지만 포커스/흐림 이벤트 핸들러로 전달되는 이벤트 객체를 살펴본 후 어떤 키가 눌려 졌는지에 대한 정보를 찾지 못했습니다 (또는 클릭 발생했거나 무엇이든). – treeface

+0

@treeface'event.keyCode' –

+0

@ 시메트 : 내가 언급했듯이,이 [작동하지 않는 것 같다] (http://jsfiddle.net/awZbN/) – treeface

관련 문제