SmartPad4i 全桁入力時のフォーカス遷移 制御

SmartPad4iのデフォルト動作では、5250エミュレータの動作と同様に、入力欄へ最大文字数の入力時には、次の入力欄へフォーカス遷移する機能が搭載されています。とても便利な機能ですが、最大桁数入力しても、次の入力欄へフォーカスを遷移しないように設定したい場合があります。
Tipsでは、フォーカス遷移機能を制御する方法についてご紹介します。

SmartPad4iのフォーカス遷移機能

SmartPad4iでは、入力欄に最大桁数を入力すると、次の入力欄へ遷移する機能が搭載されています。5250エミュレータと同じような挙動で入力をサポートしてくれます。

フォーカス遷移を停止する方法

しかし、最大桁数を入力しても、フォーカスを遷移させたくない場合もあると思います。
その場合は、JavaScriptを使用して対応することができます。

initpage関数内などで、SP4i.runNextFieldメソッドを呼び出すことで、ページ全体のフォーカス遷移を停止できます。

ページ内のフォーカス遷移を停止する場合(JavaScript)

function initpage(){
  SP4i.runNextField(false);
}

特定入力欄のフォーカス遷移を停止する場合

特定の入力欄のみフォーカス遷移を停止する場合には、少し工夫が必要となります。
SP4i.runNextField メソッドを使用するのは同じで、入力欄にフォーカスが設定されたタイミングでSP4i.runNextField(false); 入力欄からフォーカスが外れたタイミングで SP4i.runNextField(true);を実行します。

実装方法は様々ありますが、Tipsでは、カスタムデータ属性とjQueryを利用して制御する方法をご紹介します。

jQueryの読み込み

body終了タグ前にjQueryの読み込みの設定を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

カスタムデータ属性の追加

次に、フォーカスを自動遷移したくない入力欄にカスタムデータ属性を設定します。
カスタムデータ属性名は任意の名前を設定できます。
Tipsの例では data-nextfieldとしました。

<input class="input s" type="text" id="JMKIN" data-nextfield="none">

フォーカスを自動遷移しないためのカスタムデータ属性data-nextfield=”none”のは複数のタグに割り当てることができます。

フォーカス遷移停止のJavaScriptの記述

JavaScriptの処理では、data-nextfiled属性が設定されている要素にイベント処理を追加します。
入力欄にフォーカス設定時とフォーカスが外れたタイミングで処理を実行します。

以下のJavaScriptは「jQuery読み込み」の後行に追加してください。

<script>
$(function(){
  $('input[data-nextfield]').on({
    focus: function() {
      SP4i.runNextField(false) ;
    }, blur: function() {
      SP4i.runNextField(true) ;
    }
  });
});
</script>

この処理により、data-nextfiled属性が設定されている入力欄では、フォーカスが設定された際に SP4i.runNextField(false) ; が実行され、フォーカス自動遷移が停止します。
フォーカスが外れたタイミングでは、 SP4i.runNextField(true) ; が実行されてフォーカス自動遷移が有効に戻ります。