30

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

ここに画像の説明を入力

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

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

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

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

4

7 に答える 7

30

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

どうやら、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
});

デモはこちら
(デモでは次へボタンを押してください)

于 2013-09-10T21:34:04.553 に答える
10

キーボードを閉じずにモバイル ブラウザの次の入力フィールドにプログラムで移動することは不可能のようです。(これはひどい設計ですが、私たちが取り組まなければならないものです。) しかし、実際には次のフィールドに移動しているように見えるように、入力要素の位置、値、および属性を 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/

于 2014-06-12T12:57:28.320 に答える
0

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

$(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、出力

于 2017-01-02T12:22:57.853 に答える