我想让用户点击一个链接，然后它在另一个元素(不是输入)中选择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();
其他回答
更新版本，工作在chrome:
function SelectText(element) {
var doc = document;
var text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
$(function() {
$('p').click(function() {
SelectText("selectme");
});
});
http://jsfiddle.net/KcX6A/326/
根据jQuery的select()文档:
触发每个匹配元素的选择事件。这将导致执行绑定到该选择事件的所有函数，并对匹配的元素调用浏览器的默认选择操作。
这就是为什么jQuery select()在这种情况下不起作用的原因。
Tim的方法非常适合我的情况-在替换以下语句后，为IE和FF选择div中的文本:
range.moveToElementText(text);
与以下:
range.moveToElementText(el);
通过下面的jQuery函数点击它来选择div中的文本:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});
下面是一个没有浏览器嗅探和不依赖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);
Chrome的else if中增加了jQuery.browser.webkit。不能让这个工作在Chrome 23。
下面的脚本用于选择class="code"的<pre>标签中的内容。
jQuery( document ).ready(function() {
jQuery('pre.code').attr('title', 'Click to select all');
jQuery( '#divFoo' ).click( function() {
var refNode = jQuery( this )[0];
if ( jQuery.browser.msie ) {
var range = document.body.createTextRange();
range.moveToElementText( refNode );
range.select();
} else if ( jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.webkit ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
console.log(selection);
var range = refNode.ownerDocument.createRange();
range.selectNodeContents( refNode );
selection.removeAllRanges();
selection.addRange( range );
} else if ( jQuery.browser.safari ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent( refNode, 0, refNode, 1 );
}
} );
} );
