我想让用户点击一个链接,然后它在另一个元素(不是输入)中选择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();
}

我是不是错过了什么显而易见的东西?


当前回答

我也在寻找同样的东西,我的答案是:

$('#el-id').focus().select();

其他回答

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 );
        }
    } );
} );

看看Selection对象(Gecko引擎)和TextRange对象(Trident引擎)。我不知道是否有JavaScript框架实现了这种跨浏览器支持,但我也从未寻找过,所以甚至jQuery也可能具有这种支持。

纯Javascript

function selectText(nodeId) { const node = document.getElementById(nodeId); if (document.body.createTextRange) { const range = document.body.createTextRange(); range.moveToElementText(node); range.select(); } else if (window.getSelection) { const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(node); selection.removeAllRanges(); selection.addRange(range); } else { console.warn("Could not select text in node: Unsupported browser."); } } const clickable = document.querySelector('.click-me'); clickable.addEventListener('click', () => selectText('target')); <div id="target"><p>Some text goes here!</p><p>Moar text!</p></div> <p class="click-me">Click me!</p>

这里是一个工作演示。对于那些正在寻找jQuery插件的人,我也做了一个这样的插件。


jQuery(原始答案)

我在这篇文章中找到了一个解决方案。我能够修改给出的信息,并将其与jQuery混合在一起,创建一个完全很棒的函数来选择任何元素中的文本,而不管浏览器:

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

我喜欢lepe的回答,除了几件事:

浏览器嗅探,不管有没有jQuery都不是最佳选择 干 如果obj的父对象不支持createTextRange,则在IE8中无法工作 Chrome的能力使用setbaseanddextent应该被利用(IMO) 不会选择跨越多个DOM元素(“选定”元素中的元素)的文本。换句话说,如果在包含多个span元素的div上调用selText,它将不会选择每个元素的文本。这对我来说是一个致命伤,YMMV。

这是我想到的,并向麻风病的答案致敬。我相信我会被嘲笑,因为这可能有点笨拙(实际上可能更严重,但我跑题了)。但它有效,避免了浏览器嗅探,这就是重点。

selectText:function(){

    var range,
        selection,
        obj = this[0],
        type = {
            func:'function',
            obj:'object'
        },
        // Convenience
        is = function(type, o){
            return typeof o === type;
        };

    if(is(type.obj, obj.ownerDocument)
        && is(type.obj, obj.ownerDocument.defaultView)
        && is(type.func, obj.ownerDocument.defaultView.getSelection)){

        selection = obj.ownerDocument.defaultView.getSelection();

        if(is(type.func, selection.setBaseAndExtent)){
            // Chrome, Safari - nice and easy
            selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
        }
        else if(is(type.func, obj.ownerDocument.createRange)){

            range = obj.ownerDocument.createRange();

            if(is(type.func, range.selectNodeContents)
                && is(type.func, selection.removeAllRanges)
                && is(type.func, selection.addRange)){
                // Mozilla
                range.selectNodeContents(obj);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    }
    else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {

        range = document.body.createTextRange();

        if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
            // IE most likely
            range.moveToElementText(obj);
            range.select();
        }
    }

    // Chainable
    return this;
}

就是这样。你看到的一些是为了可读性和/或便利性。在Mac上测试最新版本的Opera, Safari, Chrome, Firefox和IE。也在IE8中测试过。此外,我通常只声明变量,如果/当需要在代码块内,但jslint建议它们都声明在顶部。jslint。

编辑 我忘记了如何将其绑定到操作代码中:

function SelectText(element) {
    $("#" + element).selectText();
}

干杯

根据jQuery的select()文档:

触发每个匹配元素的选择事件。这将导致执行绑定到该选择事件的所有函数,并对匹配的元素调用浏览器的默认选择操作。

这就是为什么jQuery select()在这种情况下不起作用的原因。