我想让用户点击一个链接，然后它在另一个元素(不是输入)中选择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();
}
我是不是错过了什么显而易见的东西?
当前回答
这是另一个简单的解决方案，以字符串的形式获得选定的文本，你可以使用这个字符串很容易地追加一个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();
其他回答
看看Selection对象(Gecko引擎)和TextRange对象(Trident引擎)。我不知道是否有JavaScript框架实现了这种跨浏览器支持，但我也从未寻找过，所以甚至jQuery也可能具有这种支持。
麻风病-这对我很有效，谢谢! 我把你的代码放在一个插件文件中，然后与每个语句一起使用，这样你就可以在一个页面上有多个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;
});
});
});
这是另一个简单的解决方案，以字符串的形式获得选定的文本，你可以使用这个字符串很容易地追加一个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();
Jason的代码不能用于iframe内的元素(因为作用域不同于window和document)。我修复了这个问题，我修改了它，以便用于任何其他jQuery插件(可链):
示例1:选择< code >标签内的所有文本，单击并添加类"selected":
$(function() {
$("code").click(function() {
$(this).selText().addClass("selected");
});
});
例2:单击按钮，选择Iframe中的一个元素:
$(function() {
$("button").click(function() {
$("iframe").contents().find("#selectme").selText();
});
});
注意:请记住iframe源应该位于同一个域中，以防止安全错误。
jQuery插件:
jQuery.fn.selText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
}
我在IE8、Firefox、Opera、Safari和Chrome(目前的版本)中进行了测试。我不确定它是否适用于旧的IE版本(我真的不在乎)。
根据jQuery的select()文档:
触发每个匹配元素的选择事件。这将导致执行绑定到该选择事件的所有函数，并对匹配的元素调用浏览器的默认选择操作。
这就是为什么jQuery select()在这种情况下不起作用的原因。
