web-dev-qa-db-ja.com

プログラムでモバイルサファリの次の入力フィールドに焦点を当てる

クロスワードの回答行のように機能する入力フィールドがいくつかあります。

enter image description here

各正方形には、独自の入力フィールドがあります。この理由は、とりわけ、広場に事前に入力できる場合があることです。現在、デスクトップブラウザでは、文字が入力されるたびにカーソルが次の入力フィールドにジャンプします。それは次のようなものを使用して本当にうまく機能します：

_$(this).next('input').focus();
_

しかし、モバイルサファリ（iosでテスト）の問題は、プログラムで次の入力フィールドに自動的に「ジャンプ」する方法がわからないことです。ユーザーは「次へ」ボタンを使用してそれを行うことができますが、これを自動的に行う方法はありますか？

focus()トリガーにはiosにいくつかの制限があることは知っていますが、合成クリックなどを使用した回避策もいくつか見ました。

javascriptjqueryiosfocusmobile-safari
29
David Hellsing

私はあなたのために働くかもしれない回避策を見つけました。

どうやら IOS/Safariは、タッチイベントハンドラー内でフォーカスを「受け入れる」だけです。タッチイベントをトリガーし、.focus()をその中に挿入しました。私はiPhone3SとiPhone5SでSafariを使ってこれを試しましたが、動作します：

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

デモ ここ
（デモで次のボタンを押す）

28
Sergio

キーボードを消さずにプログラムでモバイルブラウザの次の入力フィールドに移動することは不可能に思えます。 （これはひどいデザインですが、私たちがやらなければならないことです。）しかし、巧妙なハックは、実際に次のフィールドに移動しているように見えるように、入力要素の位置、値、属性をJavascriptと交換することですあなたはまだ同じ要素に集中しています。以下は、id、name、および値を交換する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/

10
Kevin Borders

iosセクションの設定ファイルにこの行を追加

preference name = "KeyboardDisplayRequiresUserAction" value = "false"

1
Lakshay Sharma

これがあなたが探しているものであることを願っています-

$(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

0
Kapilrc

UIWebviewにはプロパティkeyboardDisplayRequiresUserActionがあります

このプロパティがtrueに設定されている場合、ユーザーはWebビューの要素を明示的にタップして、その要素のキーボード（またはその他の関連する入力ビュー）を表示する必要があります。 falseに設定すると、要素のフォーカスイベントにより、入力ビューが表示され、その要素に自動的に関連付けられます。

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

0
pkamb