More than 1 year has passed since last update.

数字のみ入力のテキストボックスに最大文字数制限を入れてもWebブラウザで機能しない場合の対処法

Last updated at 2023-03-29Posted at 2023-03-29

はじめに

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