프로그래밍 방식으로 모바일 Safari의 다음 입력 필드에 중점을 둡니다

해결법

1.나는 당신을 위해 일할 수있는 해결 방법을 발견했습니다.

나는 당신을 위해 일할 수있는 해결 방법을 발견했습니다.

분명히 iOS / Safari는 터치 이벤트 핸들러 내에있는 경우에만 초점을 "받아 들일 수 있습니다. 나는 터치 이벤트를 트리거하고 .focus ()를 삽입했습니다. Safari와 iPhone3 및 iPhone5s에서 이것을 시도했으며 작동합니다.
```
var focused = $('input:first'); //this is just to have a starting point

$('button').on('click', function () { // trigger touch on element to set focus
    focused.next('input').trigger('touchstart'); // trigger touchstart
});

$('input').on('touchstart', function () {
    $(this).focus();   // inside this function the focus works
    focused = $(this); // to point to currently focused
});
```
데모 (데모에서 다음 버튼을 누르십시오)
2.프로그래밍 방식으로 키보드를 해제하지 않고 모바일 브라우저에서 다음 입력 필드로 이동하는 것은 불가능한 것처럼 보입니다. (이것은 끔찍한 디자인이지만, 우리가 일해야 할 일입니다.) 그러나 영리한 해킹은 입력 요소 위치, 값 및 속성을 JavaScript로 스왑하는 것입니다. 실제로 다음 필드로 이동하는 것처럼 보이도록 당신은 여전히 같은 요소에 초점을 맞추고 있습니다. 다음은 ID, 이름 및 값을 스왑하는 jQuery 플러그인 코드입니다. 필요에 따라 다른 속성을 스왑하도록 적용 할 수 있습니다. 또한 등록 된 이벤트 핸들러를 수정해야합니다.

프로그래밍 방식으로 키보드를 해제하지 않고 모바일 브라우저에서 다음 입력 필드로 이동하는 것은 불가능한 것처럼 보입니다. (이것은 끔찍한 디자인이지만, 우리가 일해야 할 일입니다.) 그러나 영리한 해킹은 입력 요소 위치, 값 및 속성을 JavaScript로 스왑하는 것입니다. 실제로 다음 필드로 이동하는 것처럼 보이도록 당신은 여전히 같은 요소에 초점을 맞추고 있습니다. 다음은 ID, 이름 및 값을 스왑하는 jQuery 플러그인 코드입니다. 필요에 따라 다른 속성을 스왑하도록 적용 할 수 있습니다. 또한 등록 된 이벤트 핸들러를 수정해야합니다.
```
$.fn.fakeFocusNextInput = function() {
    var sel = this;
    var nextel = sel.next();
    var nextval = nextel.val();
    var nextid = nextel.attr('id');
    var nextname = nextel.attr('name');
    nextel.val(sel.val());
    nextel.attr('id', sel.attr('id'));
    nextel.attr('name', sel.attr('name'));
    sel.val(nextval);
    sel.attr('id', nextid);
    sel.attr('name', nextname);
    // Need to remove nextel and not sel to retain focus on sel
    nextel.remove();
    sel.before(nextel);
    // Could also return 'this' depending on how you you want the
    // plug-in to work
    return nextel;
};
```
데모 여기 : http://jsfiddle.net/ebu6a/194/
3.iOS 섹션에서 구성 파일 에이 행을 추가하십시오.

iOS 섹션에서 구성 파일 에이 행을 추가하십시오.

기본 설정 이름 = "keyboardDisplayRequireSuserAction"값 = "거짓"

4.나는 이것이 당신이 찾고있는 것인가?

나는 이것이 당신이 찾고있는 것인가?

$(document).ready(function() {
  $('input:first').focus(); //focus first input element

  $('input').on('keyup', function(e) {
    if(e.keyCode == 8) {  //check if backspace is pressed
      $(this).prev('input').focus(); 
      return;
    }
    if($(this).val().length >= 1) { //for e.g. you are entering pin
      if ($(this).hasClass("last")) {
        alert("done");
        return;
      }
      $(this).next('input').focus(); 
    }
  });

  $('input').on('focus', function() {
    if(!$(this).prev('input').val()){
      $(this).prev('input').focus();
    }
  });
});

여기서 코드를 확인하십시오.

https://jsbin.com/soqubal/3/edit?html,output

5.uiwebview에는 keyboardDisplayRequireSuserAction 속성이 있습니다

uiwebview에는 keyboardDisplayRequireSuserAction 속성이 있습니다

https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

6.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
     #hidebox {position:absolute; border: none; background:transparent;padding:1px;}
     #hidebox:focus{outline: 0;}

    </style>
</head>

<body>

<input type="text" maxlength="1" onkeyup="keyUp(this)" onkeydown="keyDown(this)" size="2" id="hidebox" at="1">
<input type="text" maxlength="1" size="2" id="mFirst" at="1" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mSecond" at="2" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mThird" at="3" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mFourth" at="4" onfocus="onFocus(this)">
</li>
<script type="text/javascript">

window.onload = function() {
     document.getElementById("mFirst").focus(); 
}
var array = ["mFirst","mSecond","mThird","mFourth"];
function keyUp(e) {
  var curId = array[Number(e.getAttribute("at"))-1];
  var nextId = array[Number(e.getAttribute("at"))];
  var curval= e.value;
var letters = /^[0-9a-zA-Z]+$/;
if(e.value.match(letters)){
  document.getElementById(curId).value = curval;
  if(e.getAttribute("at") <= 3){
  var nextPos = document.getElementById(nextId).offsetLeft;
  e.setAttribute("at",Number(e.getAttribute("at"))+1);
  e.style.left = nextPos+"px";
  }
 e.value = ""
}else {
 e.value = "";
}
} 
function keyDown(e) {
    var curId = array[Number(e.getAttribute("at"))-1];
    document.getElementById(curId).value = "";
} 

function onFocus(e) {
  document.getElementById("hidebox").focus();
  document.getElementById("hidebox").setAttribute("at",Number(e.getAttribute("at")));
  document.getElementById("hidebox").style.left = e.offsetLeft+"px";
  document.getElementById("hidebox").style.top = e.offsetTop+"px";
}

</script>
</body>
</html>

from https://stackoverflow.com/questions/18728166/programmatically-focus-on-next-input-field-in-mobile-safari by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JavaScript / JQuery 스크롤에서 수동 스크롤 (마우스 휠 / 스크롤바를 통해)을 구별 할 수 있습니까? (0)	2020.11.03
[JQUERY] JQuery Post JSON 객체를 서버에 게시합니다 (0)	2020.11.03
[JQUERY] jQuery : unbind 이벤트 핸들러가 나중에 다시 묶을 수 없습니다. (0)	2020.11.03
[JQUERY] jQuery Ajax - Ajax 호출을 할 때 네트워크 연결 오류를 감지하는 방법 (0)	2020.11.03
[JQUERY] HTML 테이블에 JSON 데이터를 표시합니다 (0)	2020.11.03

복붙노트

[JQUERY] 프로그래밍 방식으로 모바일 Safari의 다음 입력 필드에 중점을 둡니다

프로그래밍 방식으로 모바일 Safari의 다음 입력 필드에 중점을 둡니다

해결법

1.나는 당신을 위해 일할 수있는 해결 방법을 발견했습니다.

3.iOS 섹션에서 구성 파일 에이 행을 추가하십시오.

4.나는 이것이 당신이 찾고있는 것인가?

5.uiwebview에는 keyboardDisplayRequireSuserAction 속성이 있습니다

6.

'JQUERY' 카테고리의 다른 글

티스토리툴바