Javascript 奇怪的选择行为
我的JS代码:Javascript 奇怪的选择行为,javascript,jquery,selection,range,Javascript,Jquery,Selection,Range,我的JS代码: function getSelectedText(){ if(window.getSelection){ select = window.getSelection().getRangeAt(0); var st_span = select.startContainer.parentNode.getAttribute("id").split("_")[1]; var e
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文件:
很难解释,所以我准备了一部短片:
简而言之:当我按住鼠标左键选择文本/数字并从字母/数字的一半开始选择时,虽然此字母/数字未高亮显示,但它已添加到选择中。我必须准确地开始选择。宽字母可以,但像i、j或l这样的字母很难
这是我电影的第二个例子。我按下了数字5长度的3/4上的左键,虽然5未高亮显示,但它已被选中
在FF和Opera上进行了测试。好的,刚刚尝试了这个演示。而且它工作得完美无瑕。它甚至可以在firefox上运行。刚刚测试了opera和safari,这两款产品都可以使用。即使我选择了半个字母或数字,它也只返回高亮显示的文本,这是您进行选择时所期望的 在一个新的网页上尝试一下,尽管只是为了测试。然后,当它工作时,您对结果感到满意,然后开始对现有页面进行更改 它比您的代码简单得多。这是一个跨浏览器脚本,用于获取用户选择的文本
<script language=javascript>
function getSelText()
{
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
else return;
document.aform.selectedtext.value = txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()">
<form name=aform >
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>
函数getSelText()
{
var-txt='';
if(window.getSelection)
{
txt=window.getSelection();
}
else if(document.getSelection)
{
txt=document.getSelection();
}
else if(文档选择)
{
txt=document.selection.createRange().text;
}
否则返回;
document.aform.selectedtext.value=txt;
}
希望这有帮助
PK一个选择有多个不同的边界点,在用户看来是相同的。您看到的可能是以下内容之间的差异,
|
是一个选择边界:
<span>5</span><span>|6</span><span>7|</span><span>8</span>
5 | 67 | 8
及
5 | 67 | 8
在这两种情况下,对所选内容调用
toString()
将得到相同的结果(“67”)。有趣的问题,我无能为力,但对有趣的我来说+1。=)啊哈,这太卑鄙了。但是这里也一样。window.getSelection()
和document.getSelection()
都返回一个Selection
对象,而不是字符串。确保在此对象上显式(txt=window.getSelection().toString()
)或隐式(txt=”“+window.getSelection()
)调用toString()
),没错。您必须调用toString()来获取文本。所以你可以照蒂姆说的做。非常感谢这个附加组件。Thx的想法!但我必须获取span的id属性值,它位于选择的开始和结束处。我使用span是因为我需要样式。我已将console.log(txt.anchorNode.parentNode.getAttribute(“id”))添加到js中,而不是document.aform。[…])。问题仍然存在。Movie:。我认为Tim Down找到了原因。但你们知道解决方案吗…:)?正如我说的,请在新的页面上分别尝试这段代码和你们的代码。从干净的空白画布上的新鲜开始。哈哈,这会有帮助的。同样在每个if语句中,将其改为txt=window.getSelection().toString(),并确保txt是字符串。而不是document.aform.selectedtext.value=txt;看来这就是这种行为的原因。你知道如何处理这个问题吗?你到底想达到什么目的?每个角色都在不同的范围内。每个跨度都有不同的id。我想从位于选择开始和结束的跨度中提取此id。我需要不同的ID,因为我必须识别每个跨度。好的,但是你想如何“处理”这个问题?事实上,选择边界就是它们所在的位置。是否正在查找包含所选内容中第一个和最后一个文本字符的元素?
<span>5|</span><span>6</span><span>7</span><span>|8</span>