双击后,可以在 onclick 事件中正确获取选择范围,但是当我再次单击所选文本时,更新的选择范围应该由窗口选择返回,但这并没有发生。任何人都可以告诉我这是 javascript 选择中的错误还是他们这样做了。除了计时器之外,还有什么解决方案可以获得更新范围。
<div id="xyz" contenteditable="true">Hello world</div>
<span class="status">Selected text : </span>
JavaScript 代码:
function yourFunction() {
if (window.getSelection) {
var selectionRange = window.getSelection();
$('.status').text(selectionRange.toString());
}
}
$('#xyz').click(function () {
$('.status').text('Mouse click');
yourFunction();
})
示例 here
最佳答案
你的 fiddle 工作得很好。但是,是的,有时当您快速连续进行选择时,它无法注册点击。
问题实际上在于您在 click
文本 input
本身上实现它的方式。当mouseup 跟随mousedown 时,将生成click 事件。当您按下鼠标然后拖动然后按下鼠标时,就会发生选择。
如果将选择检索分离出来,就不会出现这个问题。
查看更新后的 fiddle :http://jsfiddle.net/zRr4s/21/
在这里,选择检索是在单击按钮时进行的,而不是输入本身。
即,代替:
$('#xyz').click(function (e) { ...
使用这个:
$('#btn').click(function () { ...
其中,btn 是:
<input id="btn" type="button" value="get selection" />
希望对您有所帮助。
更新:
如果你坚持只在输入上处理事件,那么监听 mouseup 会是更好的选择:
请参阅此 fiddle :http://jsfiddle.net/zRr4s/22/
$('#xyz').on("mouseup", function (e) { ...
更新 2:
要处理上下文中点击的要求,您必须先清除选择。为此,您必须处理 mousedown。因此,这将破坏您只有一个处理程序的目的。总之,
您更新了 fiddle : http://jsfiddle.net/zRr4s/29/
而且,这就是您的操作方式:
$('#xyz').on("mousedown", function () {
clearTheSelection();
});
clearTheSelection
是另一个函数:
function clearTheSelection() {
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
}
上述功能的完整代码取自这个答案:https://stackoverflow.com/a/3169849/1355315
希望这能解决您所有的问题。
关于javascript - 单击选定文本后,窗口选择未提供更新范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20775824/