サスケ Works｜テキストボックスの内容をクリアする方法

> Blog > 技術 > サスケ Works｜テキストボックスの内容をクリアする方法

小原達也/ 2023年 11月 28日/ 技術サスケWorks

こんにちは！小原です。

サスケWorksのテキストボックスをクリアするボタンを作成しました。

今回もコピペ + 簡単な追記で手軽にクリアボタンが作成できるようになっていますので、アプリ制作初心者の方でも簡単にお試しいただけると思います。

※ 本カスタマイズにはプレミアムプランへの加入が必要です。

完成イメージ

登録ボタンの右側に「クリアボタン」が追加されます。

削除したい項目は一か所だけの場合もあれば複数の場合があると思います。
そのような場合の対処法は記事の後半で解説します。

クリアボタンを設置する方法

今回のカスタマイズの流れは以下の通りです。

削除したい部分を決める
コードを貼り付け
動作確認

順番に解説していきます。

1.削除したい部分を決める

お使いのアプリを開き、削除したい項目名を決めます。

今回は上記のうち「URL」と「一行テキスト」の二つを削除対象にしようと思います。

この項目名は後ほど使いますので、どこかに控えておいてください。

2.コードを貼り付け

クリアボタンを設置するため、コードを追加します。

まずはアプリの右上の歯車マークをクリック。

サイドバーから「カスタムコード」を選択します。

右上の「新規登録」ボタンをクリックして、設定画面に進みます。

続いて入力する設定は、以下を参考にしてみてください。

状態: 公開
名称: クリアボタン（分かりやすいものでOKです）
適用画面: レコード一覧画面
コード種別: JavaScript

JavaScriptとはプログラミング言語のひとつです。

この後にコピペしていただくコードはJavaScriptで書かれているため、これを選択します。

入力が終わったら「保存」ボタンをクリックして設定を終了します。

次に以下の画面に遷移するので、「ソースコードの入力」をクリックして先に進みましょう。

黒い画面が表示されたら、すでに書かれているコードを削除してください。

以下のような何も書いていないまっさらな状態になっていれば大丈夫です。

そのうえで以下のコードをコピーして、先ほどの黒い画面に貼り付けてみてください。

/*!
 * SaaskeSDK
 * Copyright (c) North Torch Co.,ltd. 2023
 * Released under the MIT License.
 * ライセンスの全文は以下をご参照ください
 * LICENSE: https://github.com/northtorch/saaske-sdk/blob/main/LICENSE.md
 * README: https://github.com/northtorch/saaske-sdk/blob/main/readme.md
*/

function setClearButton(caption, labels) {
    // ボタンオブジェクトを作成
    function createButton(innerText, name) {
        const newButton = document.createElement('BUTTON');
        newButton.innerHTML = innerText;
        newButton.id = name;
        newButton.className = name;
        return newButton;
    };

    // フォームを初期化
    function initForm(labels) {
        // 削除対象のタグの種類 / type を指定
        const targetType = 'input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select'
        // 削除対象の要素を格納する配列
        let targetElements = []

        // labelの指定があれば、そのlabelの要素のみを取得
        if (labels.length) {
            // dlタグの要素を全取得
            const dlList = document.getElementsByTagName('dl')
            labels.forEach(label => {
                for (i = 0; i < dlList.length; i++) {
                    const element = dlList[i]
                    if (element.getElementsByTagName('dt')[0].textContent.trim() === label) {
                        // labelが一致したら、その要素を取得
                        // 住所など、複数の要素が紐づいている場合があるのでquerySelectorAll
                        const pushElements = element.querySelectorAll(targetType);
                        pushElements.forEach(pushElement => {
                            targetElements.push(pushElement)
                        });
                    };
                };
            });
        } else {
            // label無指定なら、全要素を取得
            targetElements = document.querySelectorAll(targetType)
        };
        for (i = 0; targetElements.length > i; i++) {
            const elm = targetElements[i];
            console.log(elm)
            if (elm.tagName === 'SELECT') {
                // selectタグの場合は初期値に戻す
                elm.selectedIndex = -1;
            } else {
                // selectタグ以外なら値を空白にする
                try {
                    elm.value = '';
                } catch (error) {
                    console.error(error);
                };
            };
        };
    };

    function createClearButton(caption, labels) {
        // クリアボタンを作成して登録ボタンの後に配置
        const clearButton = createButton(caption, 'clear')
        clearButton.style.padding = '0.38rem 2rem';
        clearButton.style.marginBottom = '3px';
        const baseElement = document.querySelector('.submit_box.sticky.fixed');
        baseElement.appendChild(clearButton);

        clearButton.addEventListener('click', function (event) {
            // フォームを初期化
            initForm(labels);
            // 登録ボタンの発火を防ぐ
            event.preventDefault();
        });
    };

    // DOMが完全にロードされた後に実行
    window.addEventListener('DOMContentLoaded', function () {
        createClearButton(caption, labels);
    });
};

const labels = ['URL', '一行テキスト'];
setClearButton('クリア', labels);

どの項目を削除するかは、下から二番目の行で指定できます。

つまり、次の内容を変更することで削除対象を自由に制御できることになります。

const labels = ['URL', '一行テキスト'];

ここでは「URL」と「一行テキスト」の二か所を指定しました。

もし削除したい項目が一か所であったり、三か所以上の場合には、記事後半の「補足」をご覧ください。

3.動作確認

アプリのデータ登録画面で、実際の動作を確認してみます。

先ほど指定した「URL」と「一行テキスト」の二つが削除されていることが確認できました！

補足

本カスタマイズにあたっての補足知識を解説します。

1.削除対象の指定方法

結論として、角括弧 [] の中に削除したい項目名を指定します。

たとえば一つの項目だけを指定したい場合には次のようにします。

const labels = ['URL'];

複数指定する場合には次のようにカンマ区切りにします。

const labels = ['URL', 'ISBN', '一行テキスト'];

2.削除対象を書く際の注意点

注意点が3つあります。

クオテーションで囲む
複数指定の場合はカンマで区切る
角括弧で囲う

少し細かいですが、どれもプログラミングのルールになります。

思ったように動かない場合には、以下の項目をチェックいただくと良いと思います。

1.クオテーションで囲む

以下のように、削除対象の項目はクオテーション（'）で囲います。

const labels = ['URL'];

次のようにクオテーションマークで囲わない場合には動作しません。

const labels = [URL];

JavaScriptというプログラミング言語では、クオテーションの有無で意味合いがまったく違ってしまうためです。

2.複数指定の場合はカンマで区切る

削除対象が複数の場合には、次のようにカンマ区切りにします。

const labels = ['URL', 'ISBN', '一行テキスト'];

カンマは半角（,）にする必要があります。

全角（、）では動きません。

const labels = ['URL'、'ISBN'、'一行テキスト'];

3.角括弧 [] で囲う

削除対象を指定する場合には角括弧 [] を使って囲んでください。

const labels = ['URL', 'ISBN', '一行テキスト'];

JavaScriptの世界では括弧の種類にも意味があります。

別の種類の括弧を使ってしまうと、プログラムが動かない場合があります。

3.ボタンに表示する文字を変更する場合

先ほどのコードでは、ボタンに「クリア」と表示されます。

例えば、この文字を「削除」にしたい場合にはコードの最終行を変更します。

setClearButton('削除', labels);

すると、ボタンの文字が変更されていることが確認できます。

4.本コードで削除できるフォームの種類

今回のコードをコードを使うこと、サスケWorks上の以下のフォームが削除されることを確認しました。
※ 2023年11月28日現在

一行テキスト
複数行テキスト
日付
時刻
数値
氏名
電話番号
メールアドレス
URL
住所セット
郵便番号
都道府県
パスワード
ユーザー選択
グループ選択

なおフォームを独自にカスタマイズされている場合等には、動作しない場合がございます。

ソースコード公開中

本記事で紹介したコードは、GitHubからもご覧いただけます。

https://github.com/northtorch/saaske-sdk/blob/main/clearButton.js

サスケWorks関連記事はこちら

本ブログでは、サスケWorksのカスタマイズ系記事も順次アップ予定です。

NorthTorch - サスケWorks 関連記事

ぜひ、別記事の方もご覧ください。