2011-11-02 2 views
4

textarea 인 간단한 HTML 페이지가 있다고 가정하고 그 textarea을 DIV에 넣으려고합니다. 그러나 이것은 시작/페이지로드시 항상 발생하는 것은 아니므로 사용자는 해당 영역에 집중할 수도 있고 타이핑 할 수도 있습니다.포커스를 유지하면서 DOMElement를 이동할 수 있습니까?

DIV를 생성하고 textarea의 부모에 추가 한 다음 textarea을 넣어 영역을 이동/감쌈 할 수 있으며 매우 효과적입니다. 그러나 내가 그렇게 할 때 textarea에서 포커스가 제거되고 사용자가 타이핑 중일 경우 그들은 화를 낼 것입니다.

사용자를 방해하지 않고 textarea의 DOM 노드를 어떻게 움직일 수 있습니까? 이것은 가능한가?

답변

4

을 초점을 호출해야 브라우저에서 w를 결정할 수 있습니다. document.activeElement를 사용하여 요소에 포커스가 있습니다. 이동을 수행하기 전에 값을 저장하고 나중에 텍스트 영역의 .focus()를 사용하여 포커스를 다시 설정하면 저장 한 것과 같은 요소입니다.

+0

정확히 내가 찾고있는 것, 훌륭합니다! – Coderer

1

모든 것을 이동 한 후에 만 ​​초점을 재설정하면됩니다. 이동 후 당신의 textArea의에

사용

.focus() 

.

+0

괜찮 았어.하지만 내가 어딘가에 포커스가 있다면 어떨까? * 다른 곳으로 옮겼을 때 - 포커스가 있는지 알아봐야 겠어? 내 말은, 내가 박스 A를 타이핑하는 것을 원하지 않는다면, 박스 B를 움직여서 A에서 B로 포커스가 점프하는 것입니다. – Coderer

0

사업부에 텍스트 영역을 추가 한 후에 당신은 단순히이 fiddle

HTML 시연, 텍스트 영역에 따라

<textarea id="test">test</textarea> 

JAVASCRIPT

var textarea = document.getElementById('test'); 

setTimeout(function(){ 
    var div = document.createElement('div'); 
    document.body.appendChild(div); 
    div.appendChild(textarea); 
    textarea.focus(); 
    console.log('appended'); 
},2000); 
3

글쎄요, 다시 초점 맞추기 (focus() 사용)가 중요합니다.하지만 사용자의 커서를 동일한 위치 (가능하다면 현재 선택된 곳)에 두는 것이 좋습니다. document.selection/range API를 사용하는 것은 가능하지만 https://developer.mozilla.org/en/DOM/range을 참조하십시오.

link은 IE에서 해당 API를 사용하는 해결책 (약간 다른 문제)을 설명합니다.

+0

고맙지 만 특정 브라우저에서만 문제 일 수 있다고 생각합니다. 단순히 Firefox에서 텍스트 영역에 초점을 맞추기 만하면 이동 전의 커서를 "뒤로"놓을 수 있습니다. 그리고 이것은 Greasemonkey 스크립트를위한 것입니다. 따라서 Firefox에서 작동한다면 이것은 현재 "충분히 좋은"것입니다. – Coderer

관련 문제