document.getElementById (id) .focus ()가 firefox 또는 chrome에서 작동하지 않습니다.
내가 onchange 이벤트를 할 때마다 해당 기능 내부로 들어가는 것은 유효성 검사이지만 초점이 오지 않습니다. document.getElementById('controlid').focus();
Mozilla Firefox와 Google Chrome을 모두 사용하고 있습니다. 나는 어떤 IE도 원하지 않는다. 아무도 나에게 이유를 말할 수 있습니까?
미리 감사드립니다
코드는 다음과 같습니다.
var mnumber = document.getElementById('mobileno').value;
if(mnumber.length >=10) {
alert("Mobile Number Should be in 10 digits only");
document.getElementById('mobileno').value = "";
document.getElementById('mobileno').focus();
return false;
}
타이머를 사용해보십시오.
var mnumber = document.getElementById('mobileno').value;
if (mnumber.length >=10)
{
alert("Mobile Number Should be in 10 digits only");
document.getElementById('mobileno').value = "";
window.setTimeout(function ()
{
document.getElementById('mobileno').focus();
}, 0);
return false;
}
스레드가 유휴 상태가되면 카운트가 0 인 타이머가 실행됩니다. 그래도 도움이되지 않으면 onblur 이벤트의 코드 (타이머 포함)를 대신 사용해보십시오.
focus()
작동하지 않는 경우 언급해야 할 2 가지 사항 :
- 부모에 추가 한 후이 기능을 사용하십시오.
- 콘솔을 선택하면 페이지 새로 고침 후 요소가 포커스를 얻지 못하므로 테스트하는 동안 웹 페이지를 선택 (클릭)합니다.
이 방법은 Firefox와 Chrome 모두에서 setTimeOut()
.
window.setTimeout(function () {
document.getElementById('mobileno').focus();
}, 0);
이것은 나에게도 효과적이었습니다. Firefox는 내 요소의 값을 설정하지만 초점을 두지 않습니다.
모든 요소가 포커스를받을 수있는 것은 아니지만 기본적으로이를 수정하는 tabindex 속성이 있습니다.
tabindex =를 요소에 할당하는 경우 :
초점을 맞출 수 있습니다. 사용자는 탭 키를 사용하여 더 적은 양의 tabindex가있는 요소에서 다음 요소로 이동할 수 있습니다. 예외는 특수 값입니다. tabindex = "0"은 요소가 항상 마지막에 있음을 의미합니다. tabindex = -1은 요소가 포커스를받을 수있게되지만 탭 키는 항상 해당 요소를 건너 뜁니다. focus () 메서드 만 작동합니다.
제 사건은 조금 달랐습니다. focus()
브라우저 개발자 콘솔에서 입력을 시도했습니다 . 어떻게 든 입력을 방해하고 콘솔을 최소화하면 모든 것이 예상대로 작동했습니다 . 나는 이것이 프로그래밍 방식의 솔루션이 아니라는 것을 이해하지만 누군가가 내가했던 것처럼 검색 엔진 jist에서 이것을 발견 한 경우이 정보가 도움이 될 가능성이 있습니다.
다시 초점을 맞춰 자바 스크립트에서 비밀번호 텍스트 상자를 다시 입력하려면 :
window.setTimeout(function() { document.forms["reg"]["retypepwd"].focus(); },0);
여기에 reg
등록 양식 이름이 있습니다.
이 목록에 추가해야 할 사항이 하나 더 있습니다.
초점을 맞추려는 요소가 그 자체가 아니고 초점을 맞추려고 할 때 "display : none"이있는 요소에 포함되어 있지 않은지 확인하십시오.
I know this may be an esoteric use-case but I struggled with getting an input to take focus when using Angular 2 framework. Calling focus() simply did not work not matter what I did.
Ultimately I realized angular was suppressing it because I had not set an [(ngModel)] on the input. Setting one solved it. Hope it helps someone.
Are you trying to reference the element before the DOM has finished loading?
Your code should go in body load (or another function that should execute when the DOM has loaded, such as $(document).ready()
in jQuery)
body.onload = function() {
// your onchange event handler should be in here too
var mnumber = document.getElementById('mobileno').value;
if(mnumber.length >=10) {
alert("Mobile Number Should be in 10 digits only");
document.getElementById('mobileno').value = "";
document.getElementById('mobileno').focus();
return false;
}
}
Make sure you use "id" and "getElementById" as shown here:
<FORM id="my_form" name="my_form" action="">
<INPUT TYPE="text" NAME="somefield" ID="somefield" onChange="document.getElementById('my_form').submit();">
</FORM>
Add a control, where you want to set focus then change its property like below
<asp:TextBox ID="txtDummy" runat="server" Text="" Width="2" ReadOnly="true" BorderStyle="None" BackColor="Transparent"></asp:TextBox>
In the codebehind, just call like below txtDummy.Focus()
this method is working in all browser.
I suspect the reason this works is the browser rendering runs on the same thread as javascript, and setTimeout(function(){},0); queues the javascript function inside setTimeout to execute when the browser becomes idle. If anyone has a more in-depth explanation please share it.
setTimeout(function(){
if(document.getElementById('mobileno')){
document.getElementById('mobileno').focus();
}
},0);
The timeout suggested above worked around the issue on Chrome. Not issue existed on IE8 or FF3. Thanks for the tip as always. My code that to set focus that worked is: window.setTimeout(function() { document.form1.password.focus(); },0);
Your focus is working before return false; ,After that is not working. You try this solution. Control after return false;
Put code in function:
function validateNumber(){
var mnumber = document.getElementById('mobileno').value;
if(mnumber.length >=10) {
alert("Mobile Number Should be in 10 digits only");
document.getElementById('mobileno').value = "";
return false;
}else{
return true;
}
}
Caller function:
function submitButton(){
if(!validateNumber()){
document.getElementById('mobileno').focus();
return false;
}
}
HTML:
Input:<input type="text" id="mobileno">
<button onclick="submitButton();" >Submit</button>
Place this source above your modal :
<script>
$('body').on('shown.bs.modal', '#IdYourModal', function () {
document.getElementById('mobileno').focus();
})
</script>
ReferenceURL : https://stackoverflow.com/questions/1096436/document-getelementbyidid-focus-is-not-working-for-firefox-or-chrome
'developer tip' 카테고리의 다른 글
Ruby XML to JSON 변환기? (0) | 2021.01.10 |
---|---|
인증 된 사용자의 역할 저장 / 할당 (0) | 2021.01.10 |
빠르고 간단한 해시 코드 조합 (0) | 2021.01.09 |
Android에서 비트 맵을 그레이 스케일로 변환 (0) | 2021.01.09 |
프로그래밍 방식으로 UINavigationController에서 "뒤로"버튼을 누르는 방법 (0) | 2021.01.09 |