2013-07-08 2 views
1

.show() 함수가 호출 된 후 표시되는 숨겨진 div에 초점을 맞추려고합니다. IV는 (초점을 맞 춥니 다. 쇼()를 포함하여 몇 가지를 시도) 또는표시 후 div에 포커스 설정

$(".messageDisplayArea").show(); 
$("#message_display_area").focus(); 

사업부가 표시로 그것을 분할하지만, 페이지는 포커스를 이동하지 않습니다.

<script> 
    function showMessage(id, row) { 
      selectRow(row);   
      $(".messageDisplayArea").show();   
      $("#message_display_area").focus(); 
    } 

</script> 


<div class="messageDisplayArea" id="message_display_area" style="display: none;"> 

<p> Test Test Test </p> 

</div> 

무엇이 누락 되었습니까? 이 페이지는 상당히 크고 div가 페이지의 맨 아래에 나타납니다. 브라우저가 아래로 내려 가서 새로운 div를 포커스에 놓기를 원합니다.

+0

'div'요소에 포커스를두고 싶다는 것은 무엇을 의미합니까? – Sergio

+0

어쩌면 내가 .focus() 함수를 오해. 내가하고 싶은 것은 나타나는 새로운 div에 문자 중심의 초점을 두는 것입니다. 브라우저가 화면 하단에 나타나기 때문에 브라우저가 div로 점프하는 것과 마찬가지로 사용자가 스크롤 할 때까지 사용자가 알지 못합니다. – CoffeePeddlerIntern

답변

2

이 줄을 바꾸기 : 이 라인

$("#message_display_area").focus(); 

:

당신이 우리에게 코드를 준 지금까지로
window.location.hash = "message_display_area"; 
+0

대단히 고마워, 이건 내가 원한거야! 짧고 달콤하며 단순한 – CoffeePeddlerIntern

1

포커스는 페이지를 요소로 스크롤하여 실제로 커서를 얻는 폼 컨트롤에 자주 사용된다는 것을 의미하지 않습니다.

는 당신이 필요로하는 것은 실제로 새로 만든 사업부의 오프셋 (offset) 페이지를 계산하고 그 위치에 페이지를 스크롤합니다 scrollToElement() 기능입니다, 좋은 여기에 설명되어 있습니다 : jQuery scroll to element

+0

게시 해 주셔서 감사합니다. 시간을내어 주시면 감사하겠습니다. – CoffeePeddlerIntern

2

, 이 바이올린에서와 같이, 가지고있는 것이 효과가 있습니다.

http://jsfiddle.net/SuERE/

http://jsfiddle.net/SuERE/1/

HTML :

<button type="button">Show and Focus</button> 
<div style='height:700px'></div> 
<input type="text" id="input" style='display:none;'/> 

자바 스크립트 :

$("button").on("click",function(){ 
    $("#input").show(); 
    $("#input").focus(); 
}); 
+0

게시하고 도움을 주셔서 감사합니다! – CoffeePeddlerIntern

0

당신이 할 수있는 또 다른 한가지는 div 요소에 tabindex 속성을 추가합니다. 그러면 focus 메서드를 실행하고 찾은 다음 자동으로이 메서드로 이동할 수 있습니다.

<div id="message-display-area" tabindex=1000>...</div>

JSFiddle

작동을 표시합니다.