如何通过使用“选项卡”导航contentEditable表
我是非常新的Java脚本和jQuery,并设法创建一个可编辑的表,将做我需要做的一些计算。问题是,当我使用tab时,我希望它将光标移动到下一个单元格。如何通过使用“选项卡”导航contentEditable表
这是第一次在这里发布,所以如果我听起来很可笑,请耐心等待!
这是我的html代码部分的外观。
<div id = "showTable" contentEditable="true" tabindex="0">
<table id="tbl" width = "850px" border="1">
<tbody>
<th>Date Worked</th>
<th>Start</th>
<th>Meal break</th>
<th>End</th>
<th>Hourly Wage</th>
<th>Gross Earnings</th>
<th>Pay Date</th>
</tbody>
</table>
</div>
之后,在javascript中,我有函数(我在网上找到的)会创建动态表。
function createDynamicTable(tbody, rows, cols)
{
if (tbody == null || tbody.length < 1) return;
for (var r = 0; r < rows; r++)
{
var trow = $("<tr>");
for (var c = 0; c < cols; c++)
{
if(c == 0)
{
var dateWorked = "mm/dd/yyyy" ;
$("<td>")
.addClass("tableCell")
.text(dateWorked)
.data("col", c)
.appendTo(trow);
col[counter] = dateWorked;
counter++;
masterCounter++;
}
else if (c == 1)
{
var startTime = "h:mm AM/PM";
$("<td>")
.addClass("tableCell")
.text(startTime)
.data("col", c)
.appendTo(trow);
col[counter] = startTime;
counter++;
masterCounter++;
}
else if (c == 2)
{
var mealBreakMin = "time in minutes";
$("<td>")
.addClass("tableCell")
.text(mealBreakMin)
.data("col", c)
.appendTo(trow);
col[counter] = mealBreakMin;
counter++;
masterCounter++;
}
else if (c == 3)
{
var endTime = "h:mm AM/PM";
$("<td>")
.addClass("tableCell")
.text(endTime)
.data("col", c)
.appendTo(trow);
col[counter] = endTime;
counter++;
masterCounter++;
}
else if (c == 4)
{
var hourlyWage = "$-.--";
$("<td>")
.addClass("tableCell")
.text(hourlyWage)
.data("col", c)
.appendTo(trow);
col[counter] = hourlyWage;
counter++;
masterCounter++;
}
if(r == 6)
{
if (c == 5)
{
var grossPay = "$-.--";
$("<td>")
.addClass("tableCell")
.text(grossPay)
.data("col", c)
.appendTo(trow);
col[counter] = hourlyWage;
counter++;
masterCounter++;
}
else if (c == 6)
{
var payDate = "mm/dd/yyyy";
$("<td>")
.addClass("tableCell")
.text(payDate)
.data("col", c)
.appendTo(trow);
col[counter] = hourlyWage;
counter++;
masterCounter++;
}
}
}
trow.appendTo(tbody);
}
counter = 0;
}
现在,jQuery的一部分,我想是这样
$(".tableCell").live('click', function(e) {
document.execCommand('selectAll', false, null);
});
虽然我的目标是标签下一个单元格,我第一次尝试以下。
我认为上面的代码只会突出显示单元的一部分。但是,它会突出显示整个单元格。我查看了网页,但无法找到确切的答案,他们的桌子的制作方式与我的相似。
如果有人能帮助我,这将是非常棒的。
为了说明我所建议的,我放在一起的jsfiddle,看看是否匹配你所追求的:
短短几年的7的,以配合您的中你的榜样。每一个都包含一个标签,其默认值基于createDynamicTable()函数中的内容。
我还添加了一个jQuery针...首先,我循环所有的输入和存储他们的ddefault值使用jQuery的.data()方法(http://api.jquery.com/data/)for以后使用。我删除了焦点的默认值(但仅当它仍然是默认值时)。如果它不是默认值,它会保留那些内容,并选择内容以便于更换/更新(如果您不喜欢自动选择,可以将其删除)。在模糊处,我检查输入是否保留空白,如果是这样,我加回以前存储的默认值。我通过在那里的一些CSS以及一些视觉兴趣。
EDIT ------
如果您createDynamicTable()函数,你更新你在哪里你的设置的.text()的点,而是设置的.html()包括输入标签,而不仅仅是文字,它变成像这样(我只是注释掉没有定义,它一直在寻找的增值经销商,按我的评论您的帖子):
非常感谢你的支持我已经在下面的链接中添加了源代码前的代码,再次感谢你,我从来没有使用过input = text而不是table,因为我所有的计算都是用表格(并且工作过)开始的,如果我能找到一个方法要使用输入用户写入,并以某种方式放入数组中,我相信我不会必须更改计算代码,并且仍然可以工作。 http://pastebin.com/jZbuc5Xp – 2012-02-03 18:44:08
在您的指导下编辑完代码后,我可以在按下“添加更多星期”按钮后添加“表格”!现在只是为了让计算工作!我也会继续寻找解决方案。感谢您的时间 – 2012-02-03 18:50:52
我遇到相同的要求,其中必须允许标签& shift-tab键导航一个Ke中的contentEditable表ndo用户界面编辑器。
在这种情况下,将输入元素添加到每个单元格将不可行,因为在保存编辑器内容时,任何嵌入的表单元素的值都会丢失。
我发现的解决方案利用了Window Selection API,捕获了keydown事件。请参阅此处的工作概念证明: http://jsfiddle.net/dperish/30nh0wc3/
此方法应该足够通用,可用于任何第三方编辑器控件以及原始contentEditable区域。在这篇文章发布时,它似乎在最新版本的Chrome,Firefox,IE & Edge中完美运行。
/**
* Enables tabbing/shift-tabbing between contentEditable table cells
* @param {Window} win - Active window context.
* @param {Event} e - jQuery Event object for the keydown that fired.
*/
function tabifyEditableTable(win, e) {
if (e.keyCode !== 9) {
return false;
}
var sel;
if (win.getSelection) {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var textNode = null;
if (!e.shiftKey) {
textNode = (sel.focusNode.nodeName === "TD")
? (sel.focusNode.nextSibling != null)
? sel.focusNode.nextSibling
: (sel.focusNode.parentNode.nextSibling != null)
? sel.focusNode.parentNode.nextSibling.childNodes[0]
: null
: (sel.focusNode.parentNode.nextSibling != null)
? sel.focusNode.parentNode.nextSibling
: (sel.focusNode.parentNode.parentNode.nextSibling != null)
? sel.focusNode.parentNode.parentNode.nextSibling.childNodes[0]
: null;
} else {
textNode = (sel.focusNode.nodeName === "TD")
? (sel.focusNode.previousSibling != null)
? sel.focusNode.previousSibling
: (sel.focusNode.parentNode.previousSibling != null)
? sel.focusNode.parentNode.previousSibling.childNodes[sel.focusNode.parentNode.previousSibling.childNodes.length - 1]
: null
: (sel.focusNode.parentNode.previousSibling != null)
? sel.focusNode.parentNode.previousSibling
: (sel.focusNode.parentNode.parentNode.previousSibling != null)
? sel.focusNode.parentNode.parentNode.previousSibling
.childNodes[sel.focusNode.parentNode.parentNode.previousSibling.childNodes.length - 1]
: null;
}
if (textNode != null) {
sel.collapse(textNode, Math.min(textNode.length, sel.focusOffset + 1));
if (textNode.textContent != null) {
sel.selectAllChildren(textNode);
}
e.preventDefault();
return true;
}
}
}
return false;
}
对于老版本的IE或Safari浏览器或支持,你可能需要回退的Range对象提供相同的功能。
表的结构应该是可编辑的吗?或者只是其中的字段?如果只是每个单元格的内容,我会建议创建没有contentEditable的表格,而是选择使用标签,然后您可以在默认情况下选中它们。 – 2012-02-03 17:41:13
编辑:我相信我不能只是做input type =“text”,因为我创建函数的原因是用户可以单击一个按钮,它会创建额外的表来写入内容。在表中,它也执行基于用户输入的计算,所以我不确定如果你可以用我的代码举一些例子,那将会很棒! – 2012-02-03 18:09:52
你可以发布代码中使用变量的部分:col,counter和masterCounter吗? – 2012-02-03 18:19:25