前提
エクセルのようなものを作るべく、Handsontableを使って実装しています。
また、テキストエリアの中身を保存ボタンを押したらデータベースに保存、削除ボタンを押したら削除されるようにIndexedDBライブラリdexie.jsを使い実装しました。
実装したい機能で困っているものは、
①セルの中で値（テキスト）を選択（青色になる選択状態）し、ctrl+pgupキーやctrl+pgdnキーを押すとセルの列を移動し、Enterボタンを押すと任意の場所（セル）に貼り付けられる→どうやればいいのか全く分かりません。助けてください
該当のソースコード(これ以外にも実際には、dexie.jsを動かすためのnodeのモジュールがフォルダに入っていますが割合しています)
index2.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Handsontable</title> 6 <link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet" /> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8 </head> 9 <body> 10 <div id="grid"></div> 11 <div id="idText"></div> 12 <form action=""> 13 <textarea name="" id="election_state" cols="30" rows="10"></textarea> 14 <button type="button" id="btn">保存</button> 15 <button type="button" id="delete_btn">全削除</button> 16 </form> 17 18 19 20 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> 21 <script> 22 23var currents=document.getElementsByClassName('current'); 24 var data = [ 25 ['佐藤', 28,null,null], 26 ['鈴木', 19], 27 ['田中', 25], 28 [null,null] 29]; 30 31var grid = document.getElementById('grid'); 32 33 34var table=new Handsontable(grid, { 35 data: data, 36 colHeaders: true, 37 rowHeaders: true, 38 contextMenu: true, 39 mergeCells: true, 40 tabMoves: { 41 col: 0, 42 row: 1 43 } 44}); 45// var idText=document.getElementById('idText'); 46// console.log(table.getColHeader()); 47// table.selectCell(0, 0); 48// console.log(table.getValue()); 49 50window.onload = function(){ 51 var valueText=table.getValue(); 52 // ↓これがついていると、セルを選んだ回数文複数回貼り付けられる 53// Handsontable.hooks.add('afterSelection', function() { 54 // document.getElementById('idText').innerText = valueText; 55 56 document.addEventListener('keydown', keydownEvent,false); 57 58var election_state=document.getElementById('election_state'); 59 60// currents.onfocus = function(){ 61// console.log('フォーカスがあたりました') 62// }; 63function keydownEvent(event){ 64 if(event.ctrlKey) { 65 if(event.code === "KeyC"){ 66 // Ctrl + cキーが同時押しされた時に実装したい処理を記述 67 var a = window.getSelection(); 68console.log(a.toString()); 69// election_state.textContent=a.toString(); 70election_state.textContent+=a.toString(); 71// a.toString().remove(); 72 } 73 } 74} 75// }, table); 76 } 77 78 79// 保存ボタンが押されたら 80 81 </script> 82 83<script src="node_modules/dexie/dist/dexie.js"></script> 84<script src="./db.js"></script> 85 </body> 86</html>
db.js
1db3 = new Dexie('MoodDB3'); // MoodDBがデータベース名 2 3// ストア（テーブルのようなもの）の定義 4// ストア名：moods 5// 主キー：id (++はオートインクリメントな主キー) 6// その他のキー：date, moodScore, memo 7db3.version(1).stores({ 8moods: '++id, memo' 9}); 10 11 12window.addEventListener('load', () => { 13 db3.open(); 14 15 // データベースから全てのデータを取得 16 db3.moods.toArray().then((moods) => { 17 // データ一覧をクリア 18 // dataListBody2.innerHTML = ''; 19 20 console.log('取得したよ'); 21 console.log(election_state.value); 22 23 }); 24 25 26 // // 削除ボタンを作成 27 const deleteButton = document.getElementById('delete_btn'); 28 29 deleteButton.addEventListener('click', () => { 30 election_state.value=""; 31 32 db3.moods.clear().then(()=>{ 33 console.log('全削除されました'); 34 35 }); 36}); 37 38}); 39 40 41// テキストエリアのid取得 42var election_state=document.getElementById('election_state'); 43btn.addEventListener('click', () => { 44 45 // 入力された値を表示 46 console.log('押されました'); 47 console.log(election_state.value); 48 const memo = document.getElementById('election_state').value; 49 console.log(memo); 50 if (memo) { 51 // データをIndexedDBに保存 52 db3.moods.add({ memo }) 53 .then(() => { 54 alert('データが保存されました。'); 55 }) 56 .catch((error) => { 57 console.log('データの保存中にエラーが発生しました: ' + error); 58 }); 59 60 } 61 }); 62console.log('成功したよ'); 63
補足情報（FW/ツールのバージョンなど）
vscodeで検証しています
0 コメント