我想让用户点击一个链接，然后它在另一个元素(不是输入)中选择HTML文本。
我所说的“选择”是指通过拖动鼠标选择文本的相同方式。这一直是一个难以研究的问题，因为每个人都在谈论“选择”或“突出”。
这可能吗?到目前为止我的代码:
HTML:
<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>
JS:
function SelectText(element) {
$("#" + element).select();
}
我是不是错过了什么显而易见的东西?
当前回答
下面是一个没有浏览器嗅探和不依赖jQuery的版本:
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
其他回答
麻风病-这对我很有效，谢谢! 我把你的代码放在一个插件文件中，然后与每个语句一起使用，这样你就可以在一个页面上有多个pre标签和多个“Select all”链接，它会挑出正确的pre来突出显示:
<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectText").each(function(indx) {
$(this).click(function() {
$('pre').eq(indx).selText().addClass("selected");
return false;
});
});
});
下面是一个没有浏览器嗅探和不依赖jQuery的版本:
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
我的特殊用例是在一个可编辑的span元素中选择一个文本范围，据我所知，这里的任何答案都没有描述。
主要的区别是你必须传递一个Text类型的节点给Range对象，就像Range. setstart()的文档中描述的那样:
如果startNode是Text, Comment或CDATASection类型的节点， 那么startOffset是从开始的字符数 startNode。对于其他Node类型，startOffset是子节点的编号 节点之间的startNode的开始。
Text节点是span元素的第一个子节点，因此要获取它，请访问span元素的childNodes[0]。其余部分与大多数其他答案相同。
下面是一个代码示例:
var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];
var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
其他相关文件: 范围 选择 Document.createRange () Window.getSelection ()
这是另一个简单的解决方案，以字符串的形式获得选定的文本，你可以使用这个字符串很容易地追加一个div元素子元素到你的代码:
var text = '';
if (window.getSelection) {
text = window.getSelection();
} else if (document.getSelection) {
text = document.getSelection();
} else if (document.selection) {
text = document.selection.createRange().text;
}
text = text.toString();
这个线程(死链接)包含了非常棒的东西。但由于“安全错误”，我无法在这个页面上使用FF 3.5b99 + FireBug。
Yipee ! !我能够选择整个右手边栏与这段代码，希望它能帮助你:
var r = document.createRange();
var w=document.getElementById("sidebar");
r.selectNodeContents(w);
var sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
PS:-我不能使用jquery选择器返回的对象
var w=$("div.welovestackoverflow",$("div.sidebar"));
//this throws **security exception**
r.selectNodeContents(w);
