【フォームブリッジ】添付ファイルフィールドに表示される×ボタンを非活性にしたい

kintone カスタマイズ
1

いつもお世話になっております。
フォームブリッジの添付ファイルフィールドのファイル名の横にマウスカーソルを合わせると、ファイルを削除できる×ボタンが表示されると思います。

この×ボタンを非活性にするカスタマイズは可能でしょうか？
少なからず誤操作でファイルを消してしまい回答してしまうお客様が居るため、非活性にして防止したいと考えています。

javascriptでの実装になると思うのですが、情報が見当たらず難航しています。
情報をお持ちの方いらっしゃいましたらご連絡頂ければ幸いです。

2

S.Yuzawaさん

こんにちは。

 

CSSでできます。

HTMLご覧いただくと、×ボタンアイコンに「el-icon-close」「el-icon-close-tip」のclassが付いています。

これを「disable: none;」にすればアイコンが消えます。

 

ただ、これだけですと他の×ボタンアイコン（ルックアップウィンドウの右上など）も消えてしまうので

親要素のクラス「el-upload-list__item」まで指定すると良いです。

.el-upload-list __item .el-icon-close, .el-upload-list__ item .el-icon-close-tip {
    display: none !important;
}
3

koichiさん

ご返信ありがとうございます。
頂いたサンプルコードを参考に無事実装出来ました。

CSSで実装可能だったのですね、javascriptの方に固執してしまい発想が至りませんでした。
重ねてお礼申し上げます。

4

ファイルにカーソルを合わせた後、Delキー押下でもファイルが削除されてしまうようで、
こちらについても防止できるようにしたく、現在改修中です。
CSSでdisabledを記載してもうまく動かなかったのですが、CSSで制御可能でしょうか？

5

それは盲点でした。

 

disabledは恐らく効かないです。マウスクリックを不可にします。

CSS

.el-upload-list {
    pointer-events: none;
}

 

これだけですとタブ移動でフォーカスされたときに削除できてしまいます。

結局JavaScriptも必要ですね。以下は一例です。

 

添付ファイルフィールドのchangeイベントにて処理

フォーカスが当たったときに無理やりフォーカスを外します。

これがHTMLの構造上、二階層（ulタグとその子要素のliタグ）に適用しないといけません。

fb.events.fields.file.changed = [function(state) {

    // ulタグへタブ移動できるようにタブインデックスを設定
    document.getElementsByClassName('el-upload-list')[0].tabIndex = 0;

    // ulタグにフォーカスが当たったとき
    document.getElementsByClassName('el-upload-list')[0].onfocus = function() {

        document.activeElement.blur();    // フォーカスを外す

        for (let i = 0; i < this.childNodes.length; i++) {
            // 子要素であるliタグにもフォーカスが当たったときにフォーカスを外すようにする
            this.childNodes[i].onfocus = function() {
                document.activeElement.blur();    // フォーカスを外す
            }
        }

    };

}];
6

koichiさん

非常に参考になりました。ありがとうございます。
特にタブ移動でフォーカスされた時に削除できてしまう点は認識できていなかったので、
コメント頂き助かりました。