gpt4 book ai didi

javascript - 在非输入元素中捕获 "Selstart"、 "Sel..end"

转载 作者:行者123 更新时间:2023-12-02 17:04:08 26 4
gpt4 key购买 nike

我正在设置一个表格,格式如下。请原谅愚蠢的示例数据。所有这些实际上都是用 json 加载的,但输出如下所示:

<table id="famequotes">
<tr><td id="par001">It was the best of times, it was the worst of times.</td></tr>
<tr><td id="par002">Two things are infinite: the universe and human stupidity; and I'm not sure about the universe</td></tr>
<tr><td id="par003">In the jungle, the mighty jungle, the lion sleeps tonight...</td></tr>
</table>

在 $("#famequotes td") 上使用 mousedown 和 mouseup,我可以允许用户突出显示文本并捕获开始行和结束行,并类似地使用 onmouseover 捕获中间的所有行。

我想要做的是捕获起始行(我开始突出显示的表格单元格)的 SelStart 和最后一行的 sel...stop 。

尽管我已经进行了研究和谷歌搜索,但我还没有找到答案。

MIchal Hainc 的回答确实很酷,但不是我想要的。

我可以看到选择框的用途,并且我很乐意将其合并。

但是,我真正想要的是,如果用户突出显示文本,就像我在 http://jsfiddle.net/vhyyzeog/1/ 中突出显示的那样selStart 返回 3,selEnd 返回 12。我已经在跟踪第一个突出显示的行和最后一个,因此我知道要应用 selstart 和 selend 到哪些行。

感谢您的帮助。

最佳答案

我在这里为你构建了一个 fiddle :http://jsfiddle.net/jra9ttot/16/

我使用了 jQuery UI 小部件“可选择”... javascript 如下:

您可以像在 Windows 资源管理器中一样进行选择...用鼠标在表格单元格上拖动套索,它将选择多个...

    $(document).ready(function () {
$('#famequotes').selectable({
filter: 'td',
start: function (event, ui) {
$('#log').append('<div>selction start: ' + $(event.toElement).attr('id') + '</div>');
},
selected: function (event, ui) {
$('#log').append('<div>selected item: ' + $(ui.selected).attr('id') + '</div>');
},
stop: function (event, ui) {
var lastSelElem = $('#famequotes').find('td.ui-selected').last();
$('#log').append('<div>selection end: ' + $(lastSelElem).attr('id') + '</div>');
}
});
});

关于javascript - 在非输入元素中捕获 "Selstart"、 "Sel..end",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25418294/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com