2012-03-28 2 views
4

입력의 최대 길이에 도달하면 양식의 다음 입력으로 포커스를 변경하려면 아래 JavaScript를 사용하고 있습니다. 데스크톱에서는 잘 작동하지만 태블릿에서는 작동하지 않습니다. 현재 입력이 포커스를 잃으면 가상 키보드가 닫히고 다음 입력 상자는 포커스를 얻지 못합니다.js를 사용하여 타블렛에서 입력 포커스를 변경하는 방법은 무엇입니까?

타인의 입력 포커스를 기본 "다음"버튼을 사용하지 않고 변경하는 방법을 아는 사람이 있습니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0" /> 
<title>inpuTest</title> 

<script language="JavaScript"> 
function myCtrl(elmnt) 
{ 
if (elmnt.value.length==elmnt.maxLength) 
    { 
    next=elmnt.tabIndex 
    if (next<document.frmContact.elements.length) 
     { 
     document.frmContact.elements[next].focus() 

     } 
    } 
} 
</script> 

<style type="text/css"> 
form{ 
    margin:0 auto; 
    background-color:#CCC; 
    padding:2%; 
    border:1px solid #999; 
} 

form input,textarea{ 
    width:96%; 
} 
</style> 
</head> 
<body> 
<form name="frmContact" method="post"> 
    <strong>1. Your name:</strong> <span class="times_17">(max-lenght 4)</span><br /><br /> 
    <input name="formName" tabindex="1" value="" placeholder="Name" maxlength="4" type="text" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br /> 
    <strong>2. Your email:</strong> <span class="times_17">(required)</span><br /><br /> 
    <input id="formEmail" name="formEmail" tabindex="2" value="" placeholder="[email protected]" maxlength="4" type="text" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br /> 
    <strong>3. Your number:</strong><br /><br /> 
    <input name="formWebsite" tabindex="3" placeholder="Only numbers 1234" maxlength="4" type="number" onFocus="this.select()" onkeyup="myCtrl(this)"><br /><br /> 
    <strong>4. Your comments:</strong> <span class="times_17">(required)</span><br /><br /> 
    <textarea name="formComment" tabindex="4" id="comment" cols="45" rows="5" class="input2"></textarea> 
</form> 
</body> 
</html> 
+0

나는 [JSFiddle] (http://jsfiddle.net/d8Nas/)에 코드를 복사했는데 크롬과 파이어 폭스에서 작동하지 않습니다 ... – Neysor

+0

[JsFiddle] (http://jsfiddle.net/d8Nas/3/)의 HTML 상자에있는 모든 코드를 붙여 넣어 작동합니다. 답변 해 주셔서 감사합니다. – Danja

+0

죄송합니다. – Neysor

답변

2

ipad에서는이를 수행 할 수 없습니다. 나는 안드로이드가하는지 모르지만, 당신도 ipad에 그걸 가지고 싶다고 생각합니다. Apple 사의 디자인 때문에 Mobile Safari의 일부 포커스 이벤트는 무시됩니다.

당신은 스택 오버 플로우에 대한 이러한 질문 볼 수 있습니다 :

또는 알렌 파이크는 말한다 곳 quora보고 :

,536,

Mobile Safari의 일부 focus() 이벤트가 무시됩니다. 많은 사이트가 불필요하게 focus()를 수행하고 키보드를 가져 오는 것이 느리거나 방해가되는 입니다. 시간 초과 기반 실행 루프에서 작업을 수행하는 SproutCore와 같은 프레임 워크 을 사용할 때 특히 성가시다. Han 웨이의 대답은이 문제를 해결하는 방법을 잘 보여줍니다.

나는 안드로이드에 대한 동등한 링크를 찾지 못해 죄송합니다. 그것은 거기에서 일하고 있기 때문에 또는 아무도 안드로이드에 그런 일에 관심이있는 것 같습니다 :

관련 문제