Programmatically focus on next input field in mobile safari

后端未结

关注

 6  1286

有刺的猬

I have several input fields in line that acts like a crossword answer line:

$\"enter$

相关标签:

6条回答

后悔当初

2020-11-27 04:41

UIWebview has the property keyboardDisplayRequiresUserAction

When this property is set to true, the user must explicitly tap the elements in the web view to display the keyboard (or other relevant input view) for that element. When set to false, a focus event on an element causes the input view to be displayed and associated with that element automatically.

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

深忆病人

2020-11-27 04:43

I found a workaround that might work for you.

Apparently IOS/Safari only "accepts" the focus when inside a touch event handler. I triggered a touch event and inserted the .focus() inside it. I tried this on my iPhone3S and iPhone5S with Safari and it works:

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
});

Demo here
(press next button in demo)

0 讨论(0)

青春惊慌失措

2020-11-27 04:46

<!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>

0 讨论(0)

北海茫月

2020-11-27 04:50

Add this line in your config file in ios section

preference name="KeyboardDisplayRequiresUserAction" value="false"

0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2020-11-27 04:51
Programmatically moving to the next input field in a mobile browser without dismissing the keyboard appears to be impossible. (This is terrible design, but it's what we have to work with.) However, a clever hack is to swap the input element positions, values, and attributes with Javascript so that it looks like you are moving to the next field when in fact you are still focused on the same element. Here is code for a jQuery plug-in that swaps the id, name, and value. You can adapt it to swap other attributes as necessary. Also be sure to fix up any registered event handlers.
```
$.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;
};
```
Demo here: http://jsfiddle.net/EbU6a/194/
0 讨论(0)
发布评论:

提交评论
- 加载中...

余生分开走

2020-11-27 04:51

I hope this is what you are looking for-

$(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();
    }
  });
});

check code here-

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

0 讨论(0)