我想让用户点击一个链接，然后它在另一个元素(不是输入)中选择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();
}
我是不是错过了什么显而易见的东西?
当前回答
Tim的方法非常适合我的情况-在替换以下语句后，为IE和FF选择div中的文本:
range.moveToElementText(text);
与以下:
range.moveToElementText(el);
通过下面的jQuery函数点击它来选择div中的文本:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});
其他回答
Tim的方法非常适合我的情况-在替换以下语句后，为IE和FF选择div中的文本:
range.moveToElementText(text);
与以下:
range.moveToElementText(el);
通过下面的jQuery函数点击它来选择div中的文本:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});
看看Selection对象(Gecko引擎)和TextRange对象(Trident引擎)。我不知道是否有JavaScript框架实现了这种跨浏览器支持，但我也从未寻找过，所以甚至jQuery也可能具有这种支持。
下面是一个没有浏览器嗅探和不依赖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 );
}
} );
} );
我也在寻找同样的东西，我的答案是:
$('#el-id').focus().select();
