IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法

投稿日：2019-12-03 更新日：2024-01-19

このCookBookでは、IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法について紹介しています。

完成サンプル

スクリプト適用前
- 指定した行数以上に改行できます。
スクリプト適用後
- 指定した行数以上に改行できなくなります。

レシピ

「初期表示イベント」を追加する
「カスタムスクリプト」を設定する

1. 「初期表示イベント」を追加する

初期表示イベントから、「追加」を選択して、アクション「カスタムスクリプト」を選択してください。

「フォーム編集画面」－「アクション設定」－「初期表示イベント」－「追加」－「カスタムスクリプト」

2. スクリプトを設定する

「編集」アイコンをクリックして、スクリプトを作成します。
「スクリプト」に以下のような設定を行うことで、特定アイテムの行数を制限できるようになります。
以下のコードは一例です。##フィールド識別ID##を制限したいフィールド識別IDに置換して、制限行数をMAX_ROWSの値に設定してください。

//制限行数を設定
const MAX_ROWS = 4;

//制限したいアイテムを指定する。
const targetElement = document.querySelector("[name=##フィールド識別ID##]");

//変更前の値を保存する。
targetElement.beforeValue = targetElement.value;

targetElement.addEventListener("input", function () {
    if (targetElement.value.split("\n").length - 1 < MAX_ROWS) {
        targetElement.beforeValue = targetElement.value;
    } else {
        //行数制限を超えた場合は値をもとに戻す。
        targetElement.value = targetElement.beforeValue;
    }
});

//制限行数を設定

const MAX_ROWS = 4;

//制限したいアイテムを指定する。

const targetElement = document.querySelector("[name=##フィールド識別ID##]");

//変更前の値を保存する。

targetElement.beforeValue = targetElement.value;

targetElement.addEventListener("input", function () {

if (targetElement.value.split("\n").length - 1 < MAX_ROWS) {

targetElement.beforeValue = targetElement.value;

} else {

//行数制限を超えた場合は値をもとに戻す。

targetElement.value = targetElement.beforeValue;

}

});

以上で、IM-FormaDesignerの複数行アイテムの入力可能な行数を制限できるようになりました。