JavaScript-双击选择“预代码块"内的所有文本 [英] JavaScript - select all text inside a ‘pre code block’ on double-click

问题描述

我的博客上有一些代码块；我希望当某人双击一个代码块时，需要选择该代码块的所有代码.

I have some code block on my blog; I want that when someone double-click on a code block, all code of that code block need to be selected.

请查看下面的代码(这是到目前为止，尽管它使用的是 jQuery ).现在它是否可以使用本机JavaScript(不使用jQuery)?

Please look at the code below (this is what I’ve got so far, though it is using jQuery). Now is it do-able with native JavaScript( without jQuery ) ?

对不起，如果我问了一个愚蠢的问题，那么我在这些事情上是陌生的. :)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
pre.highlight {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // select all code on doubleclick
    $('pre.highlight').dblclick(function() {
        $(this).select();

        var text = this,
            range, selection;

        if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
});
</script>
<pre class="highlight"><code>.button-css {
    cursor: pointer;
    border: none;
    background: #F2861D;
    padding: 3px 8px;
    margin: 7px 0 0;
    color: #f4f4f4;
}</code></pre>
<pre class="highlight"><code> #slider {
     border-color: #c0c0c0;
     border-radius: 5px 5px 5px 5px;
     border-style: solid;
 }</code></pre>

推荐答案

您的代码在 Jquery 中工作正常.
要获取本地javascript"版本，请执行以下步骤:

Your code works fine in Jquery.
To get the "native javascript" version go through the following steps:

• 用本机替换jquery的$(document).ready处理程序 window.onload
• 使用事件目标e.target而不是jquery的this

• 而不是为每个元素添加一个事件处理程序， class="highlight"使用添加事件的高级技术 一次侦听父元素，并仅考虑所需的pre或 code元素(与class="highlight"相关)

• replace jquery's $(document).ready handler with native window.onload
• work with event target e.target instead of jquery's this

• instead of adding an event handler for each element with class="highlight" use advanced technic which is adding the event listener to the parent element once and considering only needed pre or code elements (related to class="highlight")

window.onload = function(){

    document.body.addEventListener('dblclick', function(e){
       var target = e.target || e.srcElement;        
       if (target.className.indexOf("highlight") !== -1 || target.parentNode.className.indexOf("highlight") !== -1){
            var range, selection;

            if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(target);
                range.select();
            } else if (window.getSelection) {
                selection = window.getSelection();
                range = document.createRange();
                range.selectNodeContents(target);
                selection.removeAllRanges();
                selection.addRange(range);
            }
            e.stopPropagation();
       }              

    });
};

https://jsfiddle.net/8nba46x8/

这篇关于JavaScript-双击选择“预代码块"内的所有文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！