Question

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

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

另一种解决方案是我限制php输出的字符数或用jQuery隐藏它们，并在我Tab键时扩展字段，但我不知道该怎么做。我试着调查：focus和document.activeElement（）但没有找到让它们工作的方法。

我将示例代码添加到jsfiddle。我在之前添加了一个输入字段，因为当你通过表格选项时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

为您的HTML添加tabindexes以控制标签流：

<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>

添加一些CSS：

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

删除Javascript

演示：JSFIDDLE

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

1 个答案: