ナレッジベース

SpreadJS 9J

9.20171.0

回避方法あり

FORMタグ内にSpreadJSを配置した場合に、入力規則リストの表示によってSUBMIT送信が実行される現象が発生します。


【再現手順】
1.以下の再現コードを実行します
2.セルA1を選択し、セル脇に表示されるボタンを押下して入力規則リストを表示します

【動作結果】
SUBMIT送信が実行され、ページが初期状態に戻る現象が発生します。

【再現コード】
// HTMLファイルにおいてSpreadJSをFORMタグ上に配置してください。
// 例）
// <form>
//　　 <div id="ss" ></div>
// </form>
window.onload = function() {
　　var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
　　var sheet = spread.getActiveSheet();

　　// 入力規則リストに表示する値を設定します
　　sheet.setValue(0, 2, 5);
　　sheet.setValue(1, 2, 4);
　　sheet.setValue(2, 2, 5);
　　
　　// 描画処理を一時停止します
　　sheet.suspendPaint();
　　
　　// 入力規則リストを設定します
　　spread.options.highlightInvalidData = true;
　　var dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("$C$1:$C$3");
　　sheet.setDataValidator(0, 0, dv);

　　// 描画処理を再開します
　　sheet.resumePaint();
};

以下の回避コードを使用して現象の回避が可能です。

【回避コード】
------------------------------------
document.getElementById("ss").addEventListener("DOMSubtreeModified", function (e) {
　　var elements = e.target.getElementsByTagName("input");
　　if (elements.length === 1 && elements[0].getAttribute("gcuielement") === "gcValidationButton") {
　　　　elements[0].onclick = function () { return false; }
　　}
});
------------------------------------

【現象再現コードへの回避コード適用例】
------------------------------------
window.onload = function() {
　　var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
　　var sheet = spread.getActiveSheet();

　　// 入力規則リストに表示する値を設定します
　　sheet.setValue(0, 2, 5);
　　sheet.setValue(1, 2, 4);
　　sheet.setValue(2, 2, 5);
　　
　　// 描画処理を一時停止します
　　sheet.suspendPaint();
　　
　　// 入力規則リストを設定します
　　spread.options.highlightInvalidData = true;
　　var dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("$C$1:$C$3");
　　sheet.setDataValidator(0, 0, dv);

　　// 描画処理を再開します
　　sheet.resumePaint();

　　// 【回避コード】
　　document.getElementById("ss").addEventListener("DOMSubtreeModified", function (e) {
　　　　var elements = e.target.getElementsByTagName("input");
　　　　if (elements.length === 1 && elements[0].getAttribute("gcuielement") === "gcValidationButton") {
　　　　　　elements[0].onclick = function () { return false; }
　　　　}
　　});
};
------------------------------------