jquery - 使x-可编辑字段出现并触发onfocus

Question

我使用 x-editable 进行 Bootstrap 来使用客户端数据创建可编辑的表字段。我遇到的问题是，我有一个注释字段，有时有几百个字符长，这使得表格看起来很丑陋，因为我必须使用空白:nowrap。

为了解决这个问题，我使用 jQuery 仅显示评论中的一部分，并在页面加载时隐藏可编辑字段，但当我将鼠标悬停在其上时展开。我遇到的问题是所有其他字段都可以通过 x-editable 在焦点上选择，我想让该字段也可以选择。如果我将鼠标悬停在该字段上，我可以毫无问题地按 Tab 键进入该字段，但我感兴趣的是如何按 Tab 键进入并触发可编辑字段。

另一个解决方案是我限制 php 输出的字符数或使用 jQuery 隐藏它们并在按 Tab 进入时展开字段，但我不知道该怎么做。我尝试研究 :focus 和 document.activeElement() 但没有找到让它们工作的方法。

我将示例代码添加到 jsfiddle 。我在之前添加了一个输入字段，因为当您按 Tab 键浏览表时，x-editable 会使字段变成输入元素。如果可编辑字段处于事件状态，我可以按 Tab 键进入，但如果不是，该字段将被跳过并且不会触发。

这是包含可编辑字段的示例

<td id="comment" style="border:1px solid #000000;">
    <p id="short_comment">Short comment</p>
    <p id="collapse"><a href="#" id="editable">A much longer comment that will appear</a></p>
</td>

这是 jQuery 的示例

$('#collapse').hide();
$('#comment').on('mouseenter', function(f) {

    $('#short_comment').hide();
    $('#collapse').show();

    $("#collapse").on("show",function(event){
        $('#comment').width('200px');
    });

    $("#collapse").on("hide",function(event){
        $('#comment').width('50px');
    });
});

$('#comment').on('mouseleave', function(f) {
    $('#short_comment').show();
    $('#collapse').hide();
});

Answer 1

1. 添加tabindexes让您的 HTML 控制选项卡流:

   <table>
     <tr>
       <td><input type="text" tabindex='1' /></td>
       <td id="comment" tabindex='2'>
           <p id="short_comment">Short comment</p>
           <p id="collapse"><a href="#" id="editable">A much longer comment that will appear</a></p>
        </td>
       </tr>
   </table>
   

2. 添加一些 CSS:

   #comment:hover #collapse, 
   #comment:focus #collapse {
       display:block;
   }
   #comment #collapse, 
   #comment:hover #short_comment, 
   #comment:focus #short_comment {
       display:none;
   }
   

3. 删除 JavaScript

演示:JSFIDDLE