如何在contenteditable中向上或向下移动箭头
[英]How to move arrow up or down in contenteditable
问题描述
I have a html table in which I can write anything and tabs work. 
我有一个html表，可以在其中编写任何内容，并且制表符有效。 But I am trying to make up and down arrow work as well. 但是我也试图使上下箭头也起作用。 I tried few scripts online but not able to make any of those work as those are for particular scenarios. 我在线尝试了一些脚本，但由于特定情况下无法执行任何脚本。 like: 喜欢：
$(document).keydown(function(e){ switch(e.which){ case 37: // left arrow $(e.target).closest('td').nextAll('td.editable:first').find('div'); break; case 39: // right arrow $(e.target).closest('td').nextAll('td.editable:first').find('div'); break; default: // exit for other keys return; } e.preventDefault(); // prevent default action });
table{ border: 1px solid black; table-layout: fixed; } tr { height: 28px; width: 30px; } td{ border:1px solid #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table style="width: 600px;border: 1px solid black;"> <tbody> <tr style="height: 16px;"> <td colspan="6" style="text-align: center; height: 16px; border: 1px solid black;"> <p><strong>Groups</strong></p> </td> </tr> <tr style="border: 1px; border-color: red;"> <td><p style="text-align: left;"><em><strong>Areas</strong></em></p></td> <td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td> <td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td> <td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td> <td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td> <td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td> </tr> <tr> <td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td> <td><div class="editable"></div></td> <td><div class="editable"></div></td> <td><div class="editable"></div></td> <td><div class="editable"></div></td> <td><div class="editable"></div></td> </tr> </tbody> </table>
Is there a simple script that will make arrows usable in this table? 有没有简单的脚本可以使箭头在此表中可用？
2 个解决方案
解决方案1
2 2018-07-05 22:17:51
This would be considerably easier with class names for the <td> or <div> elements, but in their absence, here is a solution. 使用<td>或<div>元素的类名，这会容易<td> ，但是如果没有，则提供解决方案。 See https://api.jquery.com/category/traversing/tree-traversal/ for more info. 有关更多信息，请参见https://api.jquery.com/category/traversing/tree-traversal/ 。
Also, use .focus() to focus the field: 同样，使用.focus()来聚焦字段：
$(document).keydown(function(e) { switch (e.which) { case 37: // left arrow $(e.target).parent().prev().find('div').focus() break; case 39: // right arrow $(e.target).parent().next().find('div').focus() break; case 40: // down $(e.target).parent().parent().next().children().eq($(e.target).parent().index()).find('div').focus() break; case 38: // up $(e.target).parent().parent().prev().children().eq($(e.target).parent().index()).find('div').focus() break; default: // exit for other keys return; } });
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <table style="width: 1400px;border: 1px solid black;"> <tbody> <tr style="height: 16px;"> <td colspan="6" style="text-align: center; width: 979px; height: 16px; border: 1px solid black;"> <p><strong>Groups</strong></p> </td> </tr> <tr border: 1px; border-color: red; "> <td><p style="text-align: left; "><em><strong>Areas</strong></em></p></td> <td style="border-color: red;border: 1px solid red; "><div contenteditable>fgjhdfjdg</div></td> <td style="border-color: red;border: 1px solid red; "><div contenteditable><sadffsf</div></td> <td style="border-color: red;border: 1px solid red; "><div contenteditable>zxcvxzcv</div></td> <td style="border-color: red;border: 1px solid red; "><div contenteditable>cvbnvbn</div></td> <td style="border-color: red;border: 1px solid red; "><div contenteditable>REQZX</div></td> </tr> <tr> <td style="border-color: red;border: 1px solid red; "><div contenteditable>CVBXCB</td> <td><div contenteditable>HJM,HJ</td> <td><div contenteditable>ASDFAS</td> <td><div contenteditable>NBCN</td> <td><div contenteditable>RTWETB</td> <td><div contenteditable>XCVBXCB</td> </tr> </tbody> </table> <style> table{ border: 1px solid black; table-layout: fixed; } tr { height: 28px; width: 100px; } td{ border:1px solid #000; } </style>
解决方案2
0 2018-07-06 02:54:39
Wouldn't it better to use all 4 arrow keys? 使用所有四个箭头键会更好吗？
Use
.next()for down ↓ and right → arrow keys.使用.next()向下↓和向右→箭头键。Use
.prev()for up ↑ and left ← arrow keys.使用.prev()作为向上↑和向左←箭头键。Use
.parent()to find the<td>and<tr>(or.closest()if frome.targetto<tr>).使用.parent()查找<td>和<tr>（如果从e.target到<tr>则使用.closest()）。Use
.eq()and the return index number of.index()to find the same positioned<td>in a neighboring<tr>.使用.eq()和返回索引号.index()找到位于同一<td>在相邻的<tr>
Confused? 困惑？ ...me too just take a look at the Demo. ...我也只是看一下演示。
Demo 演示
Details commented in comments 评论中评论的详细信息
/* Don't know if you already made the divs contenteditable but || if you haven't yet, here's a simple way of doing it. */ $('.editable').attr('contenteditable', true); // Delegate the keydown event to Document Object $(document).on('keydown', function(e) { // Prevent default action e.preventDefault(); /* Establish references to all elements that could possibly be || involved. */ // Reference the <div> being typed into var start = $(e.target); // Reference the <td> that the <div> is the child of var cell = start.parent('td'); // Reference the <tr> that the <td> is child of var row = cell.parent('tr'); // Determine the index position of the <td> var idx = row.find('td').index(cell); //console.log(idx); switch (e.which) { // Up case 38: /* Find the <tr> that's above the current <tr> || Find the <td> in the same position as current <td> || Find the <div> in that <td> */ row.prev('tr').find('td').eq(idx).find('.editable').focus(); break; // Left case 37: /* Find the <td> that's to the left of current <td> || Find the <div> within that <td> */ cell.prev('td').find('.editable').focus(); break; // Right case 39: /* Find the <td> that's to the right of current <td> || Find the <div> within that <td> */ cell.next('td').find('.editable').focus(); break; // Down case 40: /* Find the <tr> that's below the current <tr> || Find the <td> in the same position as current <td> || Find the <div> in that <td> */ row.next('tr').find('td').eq(idx).find('.editable').focus(); break; // Ignore other keys default: return; } // Stop event bubbling e.stopPropagation(); });
table { border: 1px solid black; table-layout: fixed; } tr { height: 28px; width: 30px; } td { border: 1px solid #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table style="width: 600px;border: 1px solid black;"> <tbody> <tr style="height: 16px;"> <td colspan="6" style="text-align: center; height: 16px; border: 1px solid black;"> <p><strong>Groups</strong></p> </td> </tr> <tr style="border: 1px; border-color: red;"> <td> <p style="text-align: left;"><em><strong>Areas</strong></em></p> </td> <td style="border-color: red;border: 1px solid red;"> <div class="editable"></div> </td> <td style="border-color: red;border: 1px solid red;"> <div class="editable"></div> </td> <td style="border-color: red;border: 1px solid red;"> <div class="editable"></div> </td> <td style="border-color: red;border: 1px solid red;"> <div class="editable"></div> </td> <td style="border-color: red;border: 1px solid red;"> <div class="editable"></div> </td> </tr> <tr> <td style="border-color: red;border: 1px solid red;"> <div class="editable"></div> </td> <td> <div class="editable"></div> </td> <td> <div class="editable"></div> </td> <td> <div class="editable"></div> </td> <td> <div class="editable"></div> </td> <td> <div class="editable"></div> </td> </tr> </tbody> </table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何通过上下箭头使滑块移动 - How to make slider move by pressing up and down arrow
在contenteditable中下一行 - Move down a line in contenteditable
在内容可编辑的表格中使用箭头键移动 - Move with arrow keys in a contenteditable table
如何在单击向上和向下箭头按钮时上下移动一个选定/多个选定的数组元素？ - how do I move up and down an selected/ multi-selected array element/s on click up and down arrow buttons?
如何使用javascript中的向上和向下箭头键在列表中移动所选项目？ - how to move selected item in a list using up and down arrow keys in javascript?
如何向右移动光标焦点。 在 JavaScript 中使用箭头键向左、向上和向下 - How to move cursor focus right. left , up and down using arrow keys in JavaScript
如何使用箭头键在ASP.NET Gridview中上下移动 - How to Move up and down in ASP.NET Gridview Using Arrow Keys
如何使用箭头键在网格中的行之间向上/向下移动图像？ (JavaScript) - How do I move an image Up/Down between rows in a grid using arrow keys? (JavaScript)
如何将下拉箭头移动到顶部？ - How to move drop down arrow to top?
如何上下箭头切换？ Vue - How to arrow toggle up and down? Vue
相关标签