Javascript 带输入字段的箭头导航表中的双事件（jQuery）

我使用jQuery创建了一个可编辑表，这样当用户单击单元格时，就会出现一个输入字段，用户可以输入一些文本。捕获特殊键以允许将文本保存到单元格中，或者退出并恢复以前的文本

现在我想允许使用箭头键在表格中快速移动，这样用户就可以通过按右箭头键在同一行中输入多个连续值，而不必逐个单击每个单元格

这是我目前的代码：

$( function () {
    $( "td" ).click( function ( event ) {
        if( $( this ).children( "input" ).length > 0 )
            return false;
        var tdObj = $( this );
        var trObj = tdObj.closest( "tr" );
        var tableObj = trObj.closest( "table" );
        var preText = tdObj.html();
        var inputObj = $( "<input type='text' />" );
        tdObj.html( "" );
        inputObj.width( tdObj.width() )
                .height( tdObj.height() )
                .css( { border: "0px" } )
                .val( preText )
                .appendTo( tdObj )
                .trigger( "focus" )
                .trigger( "select" );
        inputObj.keydown( function ( event ) {
            if( 13 == event.which ) { //ENTER
                Update( this, preText );
            }
            else if( 39 == event.which ) {  //RIGHT
                Update( this, preText );
                if( tdObj.index() < trObj.children( "td" ).length - 1 ) {
                    tdObj = tdObj.next();
                    tdObj.click();
                }
            }
            else if( 37 == event.which ) {  //LEFT
                Update( this, preText );
                if( tdObj.index() > 1 ) {
                    tdObj = tdObj.prev();
                    tdObj.click();
                }
            }
            else if( 38 == event.which ) { //UP
                Update( this, preText );
                if( trObj.index() > 1 ) {
                    tdObj = trObj.prev().find( "td:eq(" + tdObj.index() + ")" );
                    tdObj.click();
                }
            }
            else if( 40 == event.which ) {  //DOWN
                Update( this, preText );
                if( trObj.index() < tableObj[0].rows.length - 1 ) {
                    tdObj = trObj.next().find( "td:eq(" + tdObj.index() + ")" );
                    tdObj.click();
                }
            }
            else if( 27 == event.which ) {  //ESC
                tdObj.html( preText );
            }
        } );
        inputObj.focusout( function () { 
            Update( this, preText );
        } );
        inputObj.click( function () {
            return false;
        } );
    } );
} );

$（函数（）{
$（“td”）。单击（功能（事件）{
if（$（this）.children（“输入”）.length>0）
返回false；
var tdObj=$（此项）；
var trObj=tdObj.最近（“tr”）；
var tableObj=trObj.最近的（“表”）；
var-preText=tdObj.html（）；
var inputObj=$（“”）；
tdObj.html（“”）；
inputObj.width（tdObj.width（））
.height（tdObj.height（））
.css（{border:“0px”}）
瓦尔先生（借口）
.附件（tdObj）
.触发（“焦点”）
.触发（“选择”）；
inputObj.keydown（函数（事件）{
如果（13==event.which）{//输入
更新（这，借口）；
}
如果（39==event.which）{//RIGHT
更新（这，借口）；
if（tdObj.index（）1）{
tdObj=tdObj.prev（）；
tdObj.click（）；
}
}
else如果（38==event.which）{//UP
更新（这，借口）；
if（trObj.index（）>1）{
tdObj=trObj.prev（）.find（“td:eq（“+tdObj.index（）+”））；
tdObj.click（）；
}
}
如果（40==event.which）{//DOWN
更新（这，借口）；
if（trObj.index（）

被调用的“Update”函数对输入的文本进行一些解析/验证，并在失败时恢复原始的借口

问题是：

这里不起作用的是，当用户在一个单元格中输入一些文本，然后按箭头键时，焦点会在选定的方向上移动两个单元格，而不是只移动一个。如果用户在不输入任何文本的情况下按下箭头键，则不会发生这种情况，在这种情况下，焦点一次正确移动一个单元格

我认为问题可能与再次调用tdObj.click（）有关，但如果我不这样做，我就无法自动打开下一个单元格的输入字段；例如，如果改用tdObj.focus（），则焦点将正确移动到选定方向的下一个单元格，但用户仍需要单击它才能输入一些文本

我想知道再次调用click是否会以某种方式将上一次按键（event.which）传播到下一次调用此函数，从而在整个表中增加一个步骤。然而，如果这是真的，它不会再次递归传播，直到到达表的边缘吗？如果用户只按箭头而不按任何文本，为什么不这样做

你知道哪里出了问题，怎么解决吗

---

更新：

我刚刚注意到，如果我为.focus**事件而不是**.click实现整个函数，并且类似地，如果我用tdObj.focus（）替换所有tdObj.click（）调用实例，问题会得到部分改善，因为按下箭头不会导致在表中出现双移动

但是，“Update”函数仍然会被调用两次（我可以验证这一点，因为如果Update函数验证文本失败，则会显示两次而不是一次警报）。此外，现在使用箭头导航会导致单元格边框发生奇怪的变化，TAB向右移动一步，向下移动一步…

修复：

在对上面的代码进行了几十次修改之后，我最终发现添加了一个额外的tdObj.html（借口）行到每个案例，从而解决了问题

现在用箭四处移动效果很好，我完全不知道为什么

我无法理解为什么在我的原始代码中，“Update”函数总是被调用两次，好像还有一个事件触发了它。出于某种原因，现在我首先强制当前单元格的.html内容在调用“Update”之前具有一些值，显然只有一个事件。有人能解释这种行为吗？

修复：

在对上面的代码进行了几十次修改之后，我最终发现添加了一个额外的tdObj.html（借口）行到每个案例，从而解决了问题

现在用箭四处移动效果很好，我完全不知道为什么

我无法理解为什么在我的原始代码中，“Update”函数总是被调用两次，好像还有一个事件触发了它。出于某种原因，现在我首先强制当前c