2

我使用 x-editable 进行引导以使用客户端数据制作可编辑的表字段。我遇到的问题是我有一个有时有几百个字符长的注释字段，这使得表格看起来很可怕，因为我必须使用空格：nowrap。

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

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

我将示例代码添加到jsfiddle。我在之前添加了一个输入字段，因为当您通过表格 x-editable 使用 Tab 时，会将字段变成输入元素。如果可编辑字段处于活动状态，我可以使用 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();
});
4

1 回答 1

1

  1. 为您的 HTML添加tabindexes以控制 tabflow：

    <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

于 2013-04-03T09:19:34.907 回答