选择的奇怪行为
我的JS代码:
function getSelectedText(){
if(window.getSelection){
select = window.getSelection().getRangeAt(0);
var st_span = select.startContainer.parentNode.getAttribute("id").split("_")[1];
var end_span = select.endContainer.parentNode.getAttribute("id").split("_")[1];
console.log(select.endContainer);
var ret_urn=[st_span,end_span];
return ret_urn
}
else if(document.getSelection){
return document.getSelection();
}
}
$(document).ready(function() {
$("div#check_button button").click(function () {
var loc = getSelectedText();
console.log(loc);
});
});
这是我的整个html文件: http://pastebin.com/acdiU623
很难解释它,所以我准备了短片: http://www.youtube.com/watch?v=tVk4K70JO80
简而言之:当我按下鼠标左键并按住它来选择文本/数字并从字母/数字的一半开始选择时,虽然该字母/数字没有突出显示,但它被添加到选择中。我必须开始精确的选择。对于宽字母来说还可以,但是对于像 i、j 或 l 这样的字母就很难了。
这是我的电影的第二个例子。我在数字5的3/4长度处按下左键,虽然5没有突出显示,但它被选中了。
在 FF 和 Opera 上测试。
My JS code:
function getSelectedText(){
if(window.getSelection){
select = window.getSelection().getRangeAt(0);
var st_span = select.startContainer.parentNode.getAttribute("id").split("_")[1];
var end_span = select.endContainer.parentNode.getAttribute("id").split("_")[1];
console.log(select.endContainer);
var ret_urn=[st_span,end_span];
return ret_urn
}
else if(document.getSelection){
return document.getSelection();
}
}
$(document).ready(function() {
$("div#check_button button").click(function () {
var loc = getSelectedText();
console.log(loc);
});
});
Here is my whole html file: http://pastebin.com/acdiU623
It is hard to explain it, so I prepared short movie: http://www.youtube.com/watch?v=tVk4K70JO80
In a few words: when I press left mouse button and hold it to select text/numbers and start selection from the half of letter/number, although this letter/number is not highlighted, it is added to selection. I have to start selection precisely. It is ok with wide letters, but hard with letters like i,j or l.
This is second example of my movie. I pressed left button on 3/4 of length of number 5, although 5 is not highlighted, it is selected.
Tested on FF and Opera.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
好的,刚刚尝试了这个演示。并且它工作完美。它甚至可以在 Firefox 上运行。刚刚测试了 Opera 和 Safari,它也适用于它们。即使我选择半个字母或数字,它也只会返回突出显示的文本,这是您进行选择时所期望的。
在新的网页上尝试一下,尽管只是为了测试目的。然后,当它起作用并且您对结果感到满意时,就开始对现有页面进行更改。
它比您的代码简单得多。这是一个跨浏览器脚本,用于获取用户选择的文本
http://www.codetoad.com/javascript_get_selected_text .asp
希望这有帮助。
PK
Ok just tried this demo. and it works flawlessly. it even works on firefox. Just tested opera and safari and it works on both of them as well. Even if i select half a letter or number, it just returns the highlighted text which is what is expected when you make a selection.
try it out on a fresh webpage though just for testing purposes. then when it works and you are satisfied with the results then start making changes to your existing page.
Its a lot more simpler than your code. This is a cross-browser script to get text selected by the user
http://www.codetoad.com/javascript_get_selected_text.asp
Hope this helps.
PK
对于用户来说看起来相同的选择有多个不同的边界点。您看到的可能是以下内容之间的区别,其中
|
是选择边界:并且
在这两种情况下,在选择上调用
toString()
将为您提供相同的结果(“67”)。There are multiple different boundary points for a selection that will look the same to the user. What you're seeing is probably the difference between the following, where
|
is a selection boundary:and
In both cases, calling
toString()
on the selection will give you the same result ("67").