我使用 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();
});