この機能はとくに、SpreadJSのナビゲーションに依存するビジネスロジックを実装する場合などに便利です。
moveToNextCell: アクティブセルを次のセルに移動します。(Tabキーの既定アクション)
moveToPreviousCell: アクティブセルを前のセルに移動します。(Shift + Tabキーの既定アクション)
selectNextControl: spread.nextControlで示される特定の要素、または、設定の無い場合には自動的に検知された要素を選択します。
selectPreviousControl: spread.previousControlで示される特定の要素、または、設定の無い場合には自動的に検知された要素を選択します。
moveToNextCellThenControl: アクティブセルが最後の可視セルの場合は次のコントロールを選択します。それ以外の場合はアクティブセルを次のセルに移動します。
moveToPreviousCellThenControl: アクティブセルが最初の可視セルの場合は前のコントロールを選択します。それ以外の場合はアクティブセルを前のセルに移動します。
選択されるコントロールを設定するには、nextControlおよびpreviousControlメソッドを使用します。次に、例を示します。
SpreadJSでカスタムコマンドを作成することができます。次に、例を示します。
ナビゲーションキーと、それぞれに対応する各アクションを設定するには、registerメソッドを使用します。次に、例を示します。
registerには、以下の引数を以下の順序で指定します。
name: コマンド名
execute: コマンドを実行する関数
key: キーのUnicode
ctrl: アクションが［Ctrl］キーを使用する場合はtrue。それ以外の場合はfalse。
shift: アクションが［Shift］キーを使用する場合はtrue。それ以外の場合はfalse。
alt: アクションが［Alt］キーを使用する場合はtrue。それ以外の場合はfalse。
meta: アクションがコマンドキー（Macintoshの場合）または、Windowsキー（Microsoft Windowsの場合）を使用する場合はtrue。それ以外の場合はfalse。
commitInput コマンドを使用すると、アクティブセルを移動せずに編集中の値を確定できます。Enterキーの既定の動作では commitInputNavigationDown が使用され、編集中の値を確定して選択セルを下に移動します。セルが編集中でない場合のEnterキーによるナビゲーションを維持するには、commitInput の前に navigationDownForEnter（navigationDown を新しい名前で登録し、Enterキーに割り当てたもの）を割り当てます。
Spreadがフォーカスを失ったときに選択状態を非表示にするには、hideSelectionオプションを使用します。次に、例を示します。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var commitInputSheetName = "入力の確定";
var sheet = spread.getSheet(0);
var commitInputSheet = spread.getSheet(1);
commitInputSheet.name(commitInputSheetName);
spread.suspendPaint();
initNavigationSheet(sheet);
initCommitInputSheet(commitInputSheet);
spread.resumePaint();
var commandManager = spread.commandManager();
_getElementById("preButton").addEventListener('click', _alertHandle);
_getElementById("nextButton").addEventListener('click', _alertHandle);
function _alertHandle() {
alert(this.value);
}
_getElementById("tabAction").addEventListener('change', _moveHandle);
_getElementById("shiftTabAction").addEventListener('change', _moveHandle);
function _moveHandle() {
var id = this.id, isShift = id.indexOf("shift") === 0,
value = parseInt(this.value, 10),
actions = GC.Spread.Sheets.Commands,
action;
switch (value) {
case 0:
action = isShift ? actions.moveToPreviousCell : actions.moveToNextCell;
break;
case 1:
action = isShift ? actions.selectPreviousControl : actions.selectNextControl;
break;
case 2:
action = isShift ? actions.moveToPreviousCellThenControl : actions.moveToNextCellThenControl;
break;
}
if (action) {
commandManager.register("customCommand" + new Date().valueOf(), action, GC.Spread.Commands.Key.tab, false, isShift, false, false);
}
}
_getElementById("nextControl").addEventListener('change', _handle);
_getElementById("preControl").addEventListener('change', _handle);
function _handle() {
var id = this.id, isPre = id.indexOf("pre") === 0,
value = this.value,
control = value ? document.getElementById(value) : undefined;
if (isPre) {
spread.previousControl(control);
} else {
spread.nextControl(control);
}
}
_getElementById("hideSelection").addEventListener('click', function () {
spread.options.hideSelection = this.checked;
});
_getElementById("commitInputOnly").addEventListener('change', function () {
spread.setActiveSheet(commitInputSheetName);
setEnterShortcut(this.checked);
updateCommitInputDescription(this.checked);
activateCommitInputEditor();
});
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, updateOptionsPanel);
function initNavigationSheet(sheet) {
sheet.setRowCount(20);
sheet.setColumnCount(10);
sheet.addSpan(0, 0, 1, 7);
sheet.setValue(0, 0, "［Tab］キーまたは［Shift + Tab］キーを押すと、選択範囲が設定に従って移動します。");
for (var i = 1; i < 20; i += 3) {
for (var j = 1; j < 20; j += 3) {
sheet.setValue(i, j, "テスト");
}
}
}
function initCommitInputSheet(sheet) {
sheet.setRowCount(25);
sheet.setColumnCount(12);
sheet.options.allowCellOverflow = true;
sheet.setValue(0, 0, "［Enter］キーを押して、選択範囲の移動を確認します。");
loadSaleDataAnalysisTable(sheet, 1, 0, true);
}
function customSelectLeft(workbook, options) {
var sheet = workbook.getSheetFromName(options.sheetName);
var activeRowIndex = sheet.getActiveRowIndex();
var activeColIndex = sheet.getActiveColumnIndex();
var selNeedAdjust = getNeedAdjustSelection(sheet.getSelections(), activeRowIndex, activeColIndex);
var findFirstNotNullColIndex = function (sheet, fixRow, offset, stop) {
while (offset > stop) {
if (sheet.getValue(fixRow, offset) !== null) {
break;
}
offset--;
}
return offset;
}
var rangeChangeSmall = selNeedAdjust.col === activeColIndex && selNeedAdjust.colCount > 1 ? true : false;
var stopSearchIndex = rangeChangeSmall ? activeColIndex : 0;
var startSearchIndex = rangeChangeSmall ? selNeedAdjust.col + selNeedAdjust.colCount - 1 - 1 : selNeedAdjust.col - 1;
var findResult = findFirstNotNullColIndex(sheet, activeRowIndex, startSearchIndex, stopSearchIndex);
if (selNeedAdjust !== null && findResult >= 0) {
selNeedAdjust.colCount = rangeChangeSmall ? findResult - selNeedAdjust.col + 1 : selNeedAdjust.col - findResult + selNeedAdjust.colCount;
selNeedAdjust.col = rangeChangeSmall ? selNeedAdjust.col : findResult;
sheet.repaint();
}
}
function customSelectRight(workbook, options) {
var sheet = workbook.getSheetFromName(options.sheetName);
var activeRowIndex = sheet.getActiveRowIndex();
var activeColIndex = sheet.getActiveColumnIndex();
var sheetColCount = sheet.getColumnCount();
var selNeedAdjust = getNeedAdjustSelection(sheet.getSelections(), activeRowIndex, activeColIndex);
var findNextNotNullColIndex = function (sheet, fixRow, offset, stop) {
while (offset < stop) {
if (sheet.getValue(fixRow, offset) !== null) {
break;
}
offset++;
}
return offset;
}
var rangeChangeSmall = selNeedAdjust.col + selNeedAdjust.colCount - 1 === activeColIndex && selNeedAdjust.colCount > 1 ? true : false;
var stopSearchIndex = rangeChangeSmall ? activeColIndex : sheetColCount;
var startSearchIndex = rangeChangeSmall ? selNeedAdjust.col + 1 : selNeedAdjust.col + selNeedAdjust.colCount;
var findResult = findNextNotNullColIndex(sheet, activeRowIndex, startSearchIndex, stopSearchIndex);
if (selNeedAdjust !== null && findResult <= sheetColCount) {
selNeedAdjust.colCount = rangeChangeSmall ? selNeedAdjust.colCount + selNeedAdjust.col - findResult : findResult - selNeedAdjust.col + 1;
selNeedAdjust.col = rangeChangeSmall ? findResult : selNeedAdjust.col;
sheet.repaint();
}
}
function customSelectUp(workbook, options) {
var sheet = workbook.getSheetFromName(options.sheetName);
var activeRowIndex = sheet.getActiveRowIndex();
var activeColIndex = sheet.getActiveColumnIndex();
var selNeedAdjust = getNeedAdjustSelection(sheet.getSelections(), activeRowIndex, activeColIndex);
var findFirstNotNullRowIndex = function (sheet, fixCol, offset, stop) {
while (offset > stop) {
if (sheet.getValue(offset, fixCol) !== null) {
break;
}
offset--;
}
return offset;
}
var rangeChangeSmall = selNeedAdjust.row === activeRowIndex && selNeedAdjust.rowCount > 1 ? true : false;
var stopSearchIndex = rangeChangeSmall ? activeRowIndex : 0;
var startSearchIndex = rangeChangeSmall ? selNeedAdjust.row + selNeedAdjust.rowCount - 1 - 1 : selNeedAdjust.row - 1;
var findResult = findFirstNotNullRowIndex(sheet, activeColIndex, startSearchIndex, stopSearchIndex);
if (selNeedAdjust !== null && findResult >= 0) {
selNeedAdjust.rowCount = rangeChangeSmall ? findResult - selNeedAdjust.row + 1 : selNeedAdjust.row - findResult + selNeedAdjust.rowCount;
selNeedAdjust.row = rangeChangeSmall ? selNeedAdjust.row : findResult;
sheet.repaint();
}
}
function customSelectDown(workbook, options) {
var sheet = workbook.getSheetFromName(options.sheetName);
var activeRowIndex = sheet.getActiveRowIndex();
var activeColIndex = sheet.getActiveColumnIndex();
var sheetRowCount = sheet.getRowCount();
var selNeedAdjust = getNeedAdjustSelection(sheet.getSelections(), activeRowIndex, activeColIndex);
var findNextNotNullRowIndex = function (sheet, fixCol, offset, stop) {
while (offset < stop) {
if (sheet.getValue(offset, fixCol) !== null) {
break;
}
offset++;
}
return offset;
}
var rangeChangeSmall = selNeedAdjust.row + selNeedAdjust.rowCount - 1 === activeRowIndex && selNeedAdjust.rowCount > 1 ? true : false;
var stopSearchIndex = rangeChangeSmall ? activeRowIndex : sheetRowCount;
var startSearchIndex = rangeChangeSmall ? selNeedAdjust.row + 1 : selNeedAdjust.row + selNeedAdjust.rowCount;
var findResult = findNextNotNullRowIndex(sheet, activeColIndex, startSearchIndex, stopSearchIndex);
if (selNeedAdjust !== null && findResult <= sheetRowCount) {
selNeedAdjust.rowCount = rangeChangeSmall ? selNeedAdjust.rowCount + selNeedAdjust.row - findResult : findResult - selNeedAdjust.row + 1;
selNeedAdjust.row = rangeChangeSmall ? findResult : selNeedAdjust.row;
sheet.repaint();
}
}
function getNeedAdjustSelection(selections, rowIndex, colIndex) {
var sel = null;
for (var i = 0; i < selections.length; i++) {
if (selections[i].contains(rowIndex, colIndex)) {
sel = selections[i];
}
}
return sel;
}
commandManager.register("customSelectLeft", customSelectLeft);
commandManager.register("customSelectRight", customSelectRight);
commandManager.register("customSelectDown", customSelectDown);
commandManager.register("customSelectUp", customSelectUp);
commandManager.setShortcutKey(null, GC.Spread.Commands.Key.left, true, true, false, false);
commandManager.setShortcutKey("customSelectLeft", GC.Spread.Commands.Key.left, true, true, false, false);
commandManager.setShortcutKey(null, GC.Spread.Commands.Key.right, true, true, false, false);
commandManager.setShortcutKey("customSelectRight", GC.Spread.Commands.Key.right, true, true, false, false);
commandManager.setShortcutKey(null, GC.Spread.Commands.Key.down, true, true, false, false);
commandManager.setShortcutKey("customSelectDown", GC.Spread.Commands.Key.down, true, true, false, false);
commandManager.setShortcutKey(null, GC.Spread.Commands.Key.up, true, true, false, false);
commandManager.setShortcutKey("customSelectUp", GC.Spread.Commands.Key.up, true, true, false, false);
commandManager.register('navigationDownForEnter', GC.Spread.Sheets.Commands.navigationDown); // one command could not map to two shortcut.
setEnterShortcut(false);
updateCommitInputDescription(true);
spread.setActiveSheetIndex(0);
updateOptionsPanel();
function updateOptionsPanel() {
var isCommitInputSheet = spread.getActiveSheet().name() === commitInputSheetName;
_getElementById("navigationOptions").style.display = isCommitInputSheet ? "none" : "block";
_getElementById("commitInputOptions").style.display = isCommitInputSheet ? "block" : "none";
if (isCommitInputSheet) {
setEnterShortcut(_getElementById("commitInputOnly").checked);
setTimeout(activateCommitInputEditor, 0);
} else {
setEnterShortcut(false);
}
}
function updateCommitInputDescription(useCommitInput) {
_getElementById("commitInputNavigationDownDescription").style.display = useCommitInput ? "none" : "block";
_getElementById("commitInputDescription").style.display = useCommitInput ? "block" : "none";
}
function setEnterShortcut(useCommitInput) {
commandManager.setShortcutKey(null, GC.Spread.Commands.Key.enter, false, false, false, false);
if (useCommitInput) {
commandManager.setShortcutKey("navigationDownForEnter", GC.Spread.Commands.Key.enter, false, false, false, false);
commandManager.setShortcutKey("commitInput", GC.Spread.Commands.Key.enter, false, false, false, false);
} else {
commandManager.setShortcutKey("commitInputNavigationDown", GC.Spread.Commands.Key.enter, false, false, false, false);
}
}
function activateCommitInputEditor() {
var sheet = spread.getSheetFromName(commitInputSheetName);
if (spread.getActiveSheet() !== sheet) {
return;
}
sheet.setActiveCell(5, 4);
sheet.startEdit();
}
};
function loadSaleDataAnalysisTable(sheet, startRow, startCol, haveTitle) {
var spread = sheet.parent;
if (!spread) {
return;
}
spread.suspendPaint();
if (startRow === undefined) {
startRow = 0;
}
if (startCol === undefined) {
startCol = 0;
}
if (sheet.getRowCount(GC.Spread.Sheets.SheetArea.viewport) - startRow < 19 ||
sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) - startCol < 10) {
return;
}
spread.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.r1c1;
if (haveTitle) {
sheet.addSpan(startRow + 0, startCol + 1, 1, 10);
sheet.setRowHeight(startRow + 0, 40);
sheet.setValue(startRow + 0, startCol + 1, "売上データ分析");
sheet.getCell(startRow + 0, startCol + 1).font("bold 30px arial");
sheet.getCell(startRow + 0, startCol + 1).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
sheet.addSpan(startRow + 1, startCol + 1, 1, 3);
sheet.setValue(startRow + 1, startCol + 1, "店舗");
sheet.addSpan(startRow + 1, startCol + 4, 1, 7);
sheet.setValue(startRow + 1, startCol + 4, "商品");
sheet.addSpan(startRow + 2, startCol + 1, 1, 2);
sheet.setValue(startRow + 2, startCol + 1, "地域");
sheet.addSpan(startRow + 2, startCol + 3, 2, 1);
sheet.setValue(startRow + 2, startCol + 3, "ID");
sheet.addSpan(startRow + 2, startCol + 4, 1, 2);
sheet.setValue(startRow + 2, startCol + 4, "果物");
sheet.addSpan(startRow + 2, startCol + 6, 1, 2);
sheet.setValue(startRow + 2, startCol + 6, "野菜");
sheet.addSpan(startRow + 2, startCol + 8, 1, 2);
sheet.setValue(startRow + 2, startCol + 8, "食品");
sheet.addSpan(startRow + 2, startCol + 10, 2, 1);
sheet.setValue(startRow + 2, startCol + 10, "合計");
sheet.setValue(startRow + 3, startCol + 1, "州");
sheet.setValue(startRow + 3, startCol + 2, "都市");
sheet.setValue(startRow + 3, startCol + 4, "ぶどう");
sheet.setValue(startRow + 3, startCol + 5, "りんご");
sheet.setValue(startRow + 3, startCol + 6, "じゃがいも");
sheet.setValue(startRow + 3, startCol + 7, "トマト");
sheet.setValue(startRow + 3, startCol + 8, "サンドイッチ");
sheet.setValue(startRow + 3, startCol + 9, "ハンバーガー");
sheet.addSpan(startRow + 4, startCol + 1, 7, 1);
sheet.addSpan(startRow + 4, startCol + 2, 3, 1);
sheet.addSpan(startRow + 7, startCol + 2, 3, 1);
sheet.addSpan(startRow + 10, startCol + 2, 1, 2);
sheet.setValue(startRow + 10, startCol + 2, "小計:");
sheet.addSpan(startRow + 11, startCol + 1, 7, 1);
sheet.addSpan(startRow + 11, startCol + 2, 3, 1);
sheet.addSpan(startRow + 14, startCol + 2, 3, 1);
sheet.addSpan(startRow + 17, startCol + 2, 1, 2);
sheet.setValue(startRow + 17, startCol + 2, "小計:");
sheet.addSpan(startRow + 18, startCol + 1, 1, 3);
sheet.setValue(startRow + 18, startCol + 1, "合計:");
sheet.setValue(startRow + 4, startCol + 1, "ノースカロライナ州");
sheet.setValue(startRow + 4, startCol + 2, "ローリー");
sheet.setValue(startRow + 7, startCol + 2, "シャーロット");
sheet.setValue(startRow + 4, startCol + 3, "001");
sheet.setValue(startRow + 5, startCol + 3, "002");
sheet.setValue(startRow + 6, startCol + 3, "003");
sheet.setValue(startRow + 7, startCol + 3, "004");
sheet.setValue(startRow + 8, startCol + 3, "005");
sheet.setValue(startRow + 9, startCol + 3, "006");
sheet.setValue(startRow + 11, startCol + 1, "ペンシルベニア州");
sheet.setValue(startRow + 11, startCol + 2, "フィラデルフィア");
sheet.setValue(startRow + 14, startCol + 2, "ピッツバーグ");
sheet.setValue(startRow + 11, startCol + 3, "007");
sheet.setValue(startRow + 12, startCol + 3, "008");
sheet.setValue(startRow + 13, startCol + 3, "009");
sheet.setValue(startRow + 14, startCol + 3, "010");
sheet.setValue(startRow + 15, startCol + 3, "011");
sheet.setValue(startRow + 16, startCol + 3, "012");
for (var i = 4; i < 10; i++) {
sheet.setFormula(startRow + 10, startCol + i, "=SUM(R[-6]C:R[-1]C");
sheet.setFormula(startRow + 17, startCol + i, "=SUM(R[-6]C:R[-1]C");
sheet.setFormula(startRow + 18, startCol + i, "=R[-8]C + R[-1]C");
}
sheet.setFormula(startRow + 18, startCol + 10, "=R[-8]C + R[-1]C");
for (var i = startRow; i < 14 + startRow; i++) {
sheet.setFormula(4 + i, startCol + 10, "=SUM(RC[-6]:RC[-1])");
}
sheet.getRange(startRow + 1, startCol + 1, 3, 10).backColor("#D9D9FF");
sheet.getRange(startRow + 4, startCol + 1, 15, 3).backColor("#D9FFD9");
sheet.getRange(startRow + 1, startCol + 1, 3, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getRange(startRow + 1, startCol + 1, 18, 10).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), { all: true });
sheet.getRange(startRow + 4, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), { innerHorizontal: true });
sheet.getRange(startRow + 7, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), { innerHorizontal: true });
sheet.getRange(startRow + 11, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), { innerHorizontal: true });
sheet.getRange(startRow + 14, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), { innerHorizontal: true });
fillSampleData(sheet, new GC.Spread.Sheets.Range(startRow + 4, startCol + 4, 6, 6));
fillSampleData(sheet, new GC.Spread.Sheets.Range(startRow + 11, startCol + 4, 6, 6));
function fillSampleData(sheet, range) {
for (var i = 0; i < range.rowCount; i++) {
for (var j = 0; j < range.colCount; j++) {
sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300));
}
}
};
spread.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.a1;
spread.resumePaint();
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<aside id="navigationOptions" class="options-container" aria-label="ナビゲーションアクションの設定">
<div class="panel-header">
<h1>ナビゲーションアクション</h1>
<p class="panel-description">TabキーとShift+Tabキーでセルやページ上のコントロール間を移動する方法を変更します。</p>
<p class="panel-description">［Tabキーで次の位置に移動］を［次のコントロール］に変更してから、Spreadインスタンスをクリックしてフォーカスを与えます。</p>
<p class="panel-description">［Tab］キーを押すと、このページ上の［直前の編集］テキストボックスにフォーカスが移動します。</p>
<p class="panel-description">この機能を使用すると、Spreadでの特定のナビゲーションキーの動作を変更できます。</p>
</div>
<section class="control-section">
<h2>候補コントロール</h2>
<div class="field-row">
<input type="text" id="preEdit" placeholder="直前の編集" title="候補となる直前のコントロール" />
<input type="button" id="preButton" title="候補となる直前のコントロール" value="直前のコントロール" />
</div>
<div class="field-row">
<input type="text" id="nextEdit" placeholder="次の編集" title="候補となる次のコントロール" />
<input type="button" id="nextButton" title="候補となる次のコントロール" value="次のボタン" />
</div>
</section>
<section class="control-section">
<h2>Tabキーの動作</h2>
<div class="field">
<label for="tabAction">［Tab］キーで次の位置に移動：</label>
<select id="tabAction">
<option value="0" selected="selected">Next cell</option>
<option value="1">Next control</option>
<option value="2">Next cell then control</option>
</select>
<p class="hint">［Tab］キーを押したときのナビゲーション動作を指定します。</p>
</div>
<div class="field">
<label for="shiftTabAction">［Shift］+［Tab］キーで次の位置に移動：</label>
<select id="shiftTabAction">
<option value="0" selected="selected">Previous cell</option>
<option value="1">Previous control</option>
<option value="2">Previous cell then control</option>
</select>
<p class="hint">［Shift］+［Tab］キーを押したときのナビゲーション動作を指定します。</p>
</div>
</section>
<section class="control-section">
<h2>コントロールターゲット</h2>
<div class="field">
<label for="nextControl">次のコントロール：</label>
<select id="nextControl">
<option value="" selected="selected">Not set (auto detect)</option>
<option value="nextEdit">Next Edit</option>
<option value="nextButton">Next Button</option>
</select>
<p class="hint">Spreadインスタンスに対する次のコントロールを定義します。</p>
</div>
<div class="field">
<label for="preControl">前のコントロール：</label>
<select id="preControl">
<option value="" selected="selected">Not set (auto detect)</option>
<option value="preEdit">Previous Edit</option>
<option value="preButton">Previous Button</option>
</select>
<p class="hint">Spreadインスタンスに対する1つ前のコントロールを定義します。</p>
</div>
</section>
<section class="control-section">
<h2>選択</h2>
<label class="check-field" for="hideSelection">
<input type="checkbox" id="hideSelection" />
<span>
<strong>選択範囲を非表示</strong>
<small>このチェックボックスをオンにすると、Spreadインスタンス上に選択範囲が表示されなくなります。</small>
</span>
</label>
</section>
</aside>
<aside id="commitInputOptions" class="options-container" aria-label="入力確定の設定" style="display: none;">
<div class="panel-header">
<h1>入力の確定</h1>
<p class="panel-description" id="commitInputNavigationDownDescription">［確定して下へ移動］ではcommitInputNavigationDownを使用します。編集中にEnterキーを押すと、値を確定して選択範囲を下へ移動します。</p>
<p class="panel-description" id="commitInputDescription" style="display: none;">［確定］ではnavigationDownとcommitInputを組み合わせて使用します。編集中にEnterキーを押すと、値を確定してアクティブセルをそのまま維持します。編集モード以外でEnterキーを押すと下へ移動します。</p>
</div>
<section class="control-section">
<h2>Enterキーの動作</h2>
<label class="check-field" for="commitInputOnly">
<input type="checkbox" id="commitInputOnly" checked />
<span>
<strong>Enterキーで入力のみ確定</strong>
<small>EnterキーにnavigationDownとcommitInputを順に割り当てます。</small>
</span>
</label>
</section>
</aside>
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
}
body {
position: absolute;
inset: 0;
color: #1f2933;
background: #f7f8fa;
}
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: hidden;
}
.options-container {
flex: 0 0 320px;
width: 320px;
height: 100%;
padding: 24px 20px;
box-sizing: border-box;
overflow: auto;
background: #ffffff;
border-left: 1px solid #e5e7eb;
}
.panel-header {
padding-bottom: 20px;
border-bottom: 1px solid #eef0f3;
}
.panel-header h1 {
margin: 0;
font-size: 20px;
font-weight: 650;
line-height: 1.25;
}
.panel-description {
margin: 10px 0 0;
color: #6b7280;
font-size: 13px;
line-height: 1.6;
}
.control-section {
padding: 20px 0;
border-bottom: 1px solid #eef0f3;
}
.control-section:last-child {
border-bottom: 0;
}
.control-section h2 {
margin: 0 0 14px;
color: #374151;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.field {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.field:last-child {
margin-bottom: 0;
}
.field-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.field-row:last-child {
margin-bottom: 0;
}
label {
color: #374151;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
select,
input[type="text"],
input[type="button"] {
width: 100%;
height: 34px;
padding: 0 10px;
box-sizing: border-box;
color: #111827;
font: inherit;
background: #ffffff;
border: 1px solid #d8dde5;
border-radius: 6px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus,
input[type="text"]:focus,
input[type="button"]:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
input[type="button"] {
color: #1f2933;
font-weight: 600;
cursor: pointer;
}
input[type="button"]:hover {
background: #f8fafc;
}
.hint {
margin: 0;
color: #7a8492;
font-size: 12px;
line-height: 1.5;
}
.check-field {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 0;
cursor: pointer;
}
.check-field input {
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: #2563eb;
flex: 0 0 auto;
}
.check-field span {
display: grid;
gap: 3px;
}
.check-field strong {
color: #1f2933;
font-size: 13px;
font-weight: 650;
line-height: 1.35;
}
.check-field small {
color: #7a8492;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
@media (max-width: 760px) {
.sample-tutorial {
flex-direction: column;
}
.sample-spreadsheets {
min-height: 55%;
}
.options-container {
flex: 0 0 auto;
width: 100%;
height: 45%;
border-top: 1px solid #e5e7eb;
border-left: 0;
}
}
