目次

はじめに
解消方法
最後に

はじめに

TextBox WidgetのInput Modeが「Numeric」に設定されていて、
Max Charactersで最大文字数を設定している場合、
WebまたはSPAの画面で最大文字制限が機能しないことがあります。

↓設定画面

↓設定後の実際の画面

この事象はSPA iPhone、SPA iPad、デスクトップ Web プラットフォームで発生します。
これは、VoltMX製品の問題ではなくデバイスの制限（※）によるもので、
数字のみのテキストボックスで最大文字数制限を入れたい場合、別途ロジックでの対応が必要になります。

※デバイスの制限とは？
VoltMX Irisでテキストボックスを「Numeric」に設定すると、
ブラウザのHTML側で<input type="number">として変換されます。
number属性の場合の制限についてMDNの公式サイトを見てみると、以下のような記載があります。

引用：MDN's documentation for <input>
type属性の値がtext, email, search, password, tel, urlの場合、
この属性はユーザーが入力できる最大文字数（Unicodeコードポイント）を指定し、
その他のコントロールタイプでは無視されます。

つまり<input type="number">の場合、maxlengthを設定しても↓のように無視されてしまいます。

また、number属性を指定しビルドすると、
このように増減のアイコンが表示されると思いますが、
本来number要素を使う際は、増減のある項目（個数など）の入力などで設定すべきで
電話番号やクレジットカード番号など固定の数字を入力する場合は向いていません。

number属性を使用する場合は、
以下リンク等を参考にし適切な場所で使用するようにしましょう。
参考：https://note.com/takamoso/n/n79df2d8f16bf

解消法は2つありますので、それぞれ紹介していきます！

解消方法

Input ModeをAnyに変更

冒頭で説明の通り、type属性の値がtext, email, search, password, tel, url以外の場合、
最大文字数を設定することができません。

そのため、最大文字を制限したい場合は、
Input Modeを「Any」に設定しMax Charactersを設定することで、
<input type="text">となりWebでも最大文字数が正常に機能するようになります。

どうしても数字のみのテキストボックスを使って最大文字制限を行いたい場合は、
次の対処法をご参考ください。

最大長を制限するロジックを追加

Input Modeを「Numeric」にした状態で、最大文字数制限を入れたい場合は、
テキストが変更された時に最大文字数を制限するロジックを入れることで解消できます。

対象FormのControllerに以下のように記述しました。

form.js

define({ 
  onTextChange : function(){
    let textBox = this.view.txtNum;
    if (textBox.text.length > 2) {  
    textBox.text = textBox.text.substr(0, 2);
    }
  }
 });

2桁で制限を行いたいので、入力文字が2桁以上入力されたら、
substrメソッドで2文字に切り出しを行うように設定しました。

「substr()」は、任意の文字列の中から指定した文字列を抽出して切り出すことが出来るメソッドです。
参考：https://www.sejuku.net/blog/50543

関数が作成できたら、対象のテキストボックスにアクション設定を行って完成です。

最後に動作を見ていきましょう！

3桁以上の文字を入力しようとしても2桁で制限され、それ以上は入力できないようになりました！

最後に

今回紹介した方法は一例になります。
テキスト入力後に文字を切り捨てるなどの方法もあると思うので、
是非参考にして役立ててくださいね！

参考

https://basecamp.temenos.com/s/question/0D56A00000EqRXRSA3/numerical-textbox-unable-to-set-max-characters
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength
https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome
https://note.com/takamoso/n/n79df2d8f16bf