フォームブリッジの数値フィールドのプラスマイナスマークを隠す

フォームブリッジの数値フィールドの数値フィールドの「＋」「－」入力させる内容によっては不要ですよね｡
特にテーブルの中の数値だと無駄に横に長くなって困ります｡
公式のQ&Aの回答では非表示にできないという回答がされています｡

数値フィールドの「＋」「－」を非表示にすることはできますか？

「＋」「－」を表示したくない場合は、数値フィールドではなく文字列(1行)フィールド等をご利用ください。

この回答の通り､文字列(1行)フィールドで済めばよいのですが､文字列(1行)フィールドにして､半角数字のみにした場合､小数点の入力をするとエラーになります｡
かといって半角英数字記号のみにすると､今度は自動計算で計算することができません｡
なんで〜〜〜という仕様ですが仕方がありません｡
今回は解決策の一つとして､もともとの数値フィールドのCSSとJSを変更することにしました｡

使い方

以下のCSSとJSをPCに保存して､JSのフィールドコードを環境にあわせて変更してください｡

コード

CSS（+ボタンと-ボタンを隠す）

.el-input-number__decrease,
.el-input-number__increase {
    display: none;
}

JS(数値フィールドを右寄せにする。)

/**
 * 特定のフィールドのテキストを右寄せにし、右側のパディングを設定する関数。
 * 
 * @param {Array} fieldCodes - フィールドコードの配列。
 */
function alignNumberFieldsRight(fieldCodes) {
    fieldCodes.forEach(function(fieldCode) {
        // フィールドコードに基づいてフィールド要素を取得
        const elements = document.querySelectorAll(`[name="${fieldCode}"]`);
        elements.forEach(function(element) {
            const input = element.querySelector('input');
            if (input) {
                // テキストを右寄せにし、右側のパディングを設定
                input.style.textAlign = 'right';
                input.style.paddingRight = '5px';
            }
        });
    });
}

/**
 * テーブル内の特定のフィールドのテキストを右寄せにし、右側のパディングを設定する関数。
 * 
 * @param {string} tableCode - テーブルのフィールドコード。
 * @param {Array} fieldCodes - テーブル内のフィールドコードの配列。
 */
function alignTableNumberFieldsRight(tableCode, fieldCodes) {
    // テーブル要素を取得
    const tableElements = document.querySelectorAll(`[data-table-code="${tableCode}"]`);
    tableElements.forEach(function(tableElement) {
        fieldCodes.forEach(function(fieldCode) {
            // テーブル内の特定のフィールド要素を取得
            const fieldElements = tableElement.querySelectorAll(`[data-field-code="${fieldCode}"]`);
            fieldElements.forEach(function(fieldElement) {
                const input = fieldElement.querySelector('input');
                if (input) {
                    // テキストを右寄せにし、右側のパディングを設定
                    input.style.textAlign = 'right';
                    input.style.paddingRight = '5px';
                }
            });
        });
    });
}

// フォームがマウントされた後、またはテーブルに行が追加された後に実行
document.addEventListener('DOMContentLoaded', function() {
    // ここでフィールドコードを設定
    const numberFields = ["通常フィールドコード1", "通常フィールドコード2"];
    alignNumberFieldsRight(numberFields);

    const tableNumberFields = ["テーブルフィールドコード1", "テーブルフィールドコード2"];
    alignTableNumberFieldsRight("テーブルコード", tableNumberFields);
});