Firefox选择文本范围
问题描述:
一个简单的问题:如何以编程方式在FireFox中选择页面的文本片段?例如,有一段文字,用户点击按钮,从第10到第15的符号被选中,就像用户以常规方式拖动鼠标一样。Firefox选择文本范围
答
在Firefox中,你可以使用Range对象,如W3C规定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Range test</title>
<style>
#trigger { background: lightgreen }
</style>
</head>
<body>
<p id="test">This is some (rather short) text.</p>
<span id="trigger">→ Click here! ←</span>
<!-- Yes, I know, ‘Click here!’ is an evil message -->
<script>
var testCase = function() {
var userSelection;
if (window.getSelection) { // W3C default
userSelection = window.getSelection();
} // an extra branch would be necessary if you want to support IE
var textNode = document.getElementById('test').firstChild;
var theRange = document.createRange();
// select 10th–15th character (counting starts at 0)
theRange.setStart(textNode, 9);
theRange.setEnd(textNode, 14);
// set user selection
userSelection.addRange(theRange);
};
window.onload = function() {
var el = document.getElementById('trigger');
el.onclick = testCase;
};
</script>
</body>
</html>
请注意,您必须得到TextNode
设置的选择,这是<p>
元素的firstChild
。另外请注意,这个例子在IE中不起作用,你必须使用一些专有方法。一个很好的介绍在QuirksMode。
答
我不确定是否有办法对像段落这样的任意DOM元素执行此操作,但对于textarea元素,我相信您需要使用selectionStart
和selectionEnd
属性并指定从哪里开始和结束。
var textarea = document.getElementsByTagName('textarea')[0];
textarea.selectionStart = 10;
textarea.selectionEnd = 15;
希望这会有所帮助!
你从10号到15号的符号究竟意味着什么?段落元素中的字符? – 2010-05-11 20:17:09