JavaScript를 사용하여 HTML 형식의 요소에 포커스를 설정하려면 어떻게 해야 합니까?
텍스트 상자가 있는 웹 양식이 있습니다.기본적으로 텍스트 상자에 포커스를 설정하려면 어떻게 해야 합니까?
다음과 같은 경우:
<body onload='setFocusToTextBox()'>
누가 나 좀 도와줄래?JavaScript에서 텍스트 상자에 포커스를 설정하는 방법을 모르겠습니다.
<script>
function setFocusToTextBox(){
//What to do here
}
</script>
이렇게 해.
만약 당신의 요소가 이런 것이라면..
<input type="text" id="mytext"/>
당신의 대본은
<script>
function setFocusToTextBox(){
document.getElementById("mytext").focus();
}
</script>
HTML5 호환 브라우저에서 이 속성을 사용할 수 있습니다.버전 10의 IE에서도 동작합니다.
<input name="myinput" value="whatever" autofocus />
보통 텍스트 상자에 초점을 맞출 때는 뷰로 스크롤해야 합니다.
function setFocusToTextBox(){
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
}
도움이 되는지 확인해 보세요.
코드가 다음과 같은 경우:
<input type="text" id="mytext"/>
또한 JQuery를 사용하는 경우 다음을 사용할 수 있습니다.
<script>
function setFocusToTextBox(){
$("#mytext").focus();
}
</script>
먼저 입력을 그려야 합니다.$(document).ready()
일반 Javascript의 경우 다음을 시도해 보십시오.
window.onload = function() {
document.getElementById("TextBoxName").focus();
};
난 이걸 쓰곤 했어
<html>
<head>
<script type="text/javascript">
function focusFieldOne() {
document.FormName.FieldName.focus();
}
</script>
</head>
<body onLoad="focusFieldOne();">
<form name="FormName">
Field <input type="text" name="FieldName">
</form>
</body>
</html>
즉, HTML 5에서는 autofocus 속성을 사용할 수 있습니다.
주의:이 오래된 스레드를 업데이트하고 질문한 예시와 이 글을 읽고 계신 분들을 위한 보다 새롭고 쉬운 업데이트를 하고 싶었습니다.;)
앞에서 설명한 바와 같이 문서.폼도 동작합니다.
function setFocusToTextBox( _element ) {
document.forms[ 'myFormName' ].elements[ _element ].focus();
}
setFocusToTextBox( 0 );
// sets focus on first element of the form
window.onload는 처음에 초점을 텍스트 영역 외부를 클릭할 때 초점을 맞추거나 텍스트 영역의 흐림을 방지하는 것입니다.
<textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
{
mytexarea.focus();
}
</script>
만약 당신이<input>또는<textarea>속성이 있습니다.id=mytext그 후
mytext.focus();
function setFocusToTextBox() {
mytext.focus();
}<body onload='setFocusToTextBox()'>
<form>
<input type="text" id="mytext"/>
</form>
</body>시험:
$('.modal').on('shown.bs.modal', function () {
setTimeout(function() {
$("input#yourFieldId").addClass('modal-primary-focus').focus();
},
500);
});
이 예는 나에게 효과가 있었다
$(document).ready(function () {
document.getElementById('TextBox').focus();
}
이 주제에 대해 몇 가지 최신 사례를 공유하려고 합니다.컨텐츠가 새로고침되고 있는 경우(예를 들어 API에서 동적 DOM 로딩 결과를 로드하고 결과의 첫 번째 항목에 포커스를 설정하는 경우) 속성 자동 포커스를 추가하는 것이 솔루션이 되지 않고 첫 번째 로드에서만 작동하며 두 번째 DOM 변경은 정적 DOM 또는 단일 페이지 로드에서는 정상적으로 작동합니다.Dynamic 컴포넌트가 데이터를 로드하고 있는 경우, 심플한 .focus()는 Focus()가 아직 생성되지 않았거나 DOM이 아직 완료되지 않은 요소에 대한 트리거 포커스로 인해 실패합니다.이 경우 지연시간(setTimeout 함수)을 추가하여 DOM에서 새로 작성 또는 재생성된 요소에 포커스를 적용할 시간을 제공합니다.저의 경우는 API에서 데이터를 로드하여 첫 번째 결과에 초점을 맞추는 것이었습니다.추가 중 var el = document.getElementById(focusId); el.focus();문제를 해결하여 DOM이 지연 없이 흐릿함을 완성합니다.
<input type="text" class="word"> //html code
let theinput = document.querySelector(".word"); //Get the input
theinput.focus(); // focus on input
언급URL : https://stackoverflow.com/questions/17500704/how-can-i-set-focus-on-an-element-in-an-html-form-using-javascript
'programing' 카테고리의 다른 글
| Python3에서 'binary string'을 일반 문자열로 변환하는 방법은 무엇입니까? (0) | 2022.09.22 |
|---|---|
| PHP 경고: 모듈이 0행의 알 수 없는 위치에 이미 로드되었습니다. (0) | 2022.09.22 |
| 메이븐의 종속성 jar 파일 목록 (0) | 2022.09.22 |
| Linux 서브시스템을 탑재한 GCC를 탑재한 Windows용 실행 파일을 컴파일 하는 방법 (0) | 2022.09.22 |
| Apache Commons는 왜 '२३?' 숫자를 고려합니까? (0) | 2022.09.22 |