提问者:小点点

元素是选中的,聚焦的还是其他的。 它会阻止背景颜色可见


HTML

<div><span id="code-sample-foo" class="command prompt-win  command-text">django-admin startproject mysite
    </span></div>

<button class="clipboardjs-btn" data-code-sample-id="foo" data-clipboard-target="#code-sample-foo">Copy</button>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

JS

$( document ).ready(function() {
    // https://clipboardjs.com/

    var clippboard_buttons_class = ".clipboardjs-btn";
    var clipboard = new ClipboardJS(clippboard_buttons_class);

    function remove_background_color($code_sample){
        $code_sample.removeClass("background-color-light-green");
    }

    function blink_background_color($code_sample){
        // By blinking signal to user that the code is copied.
        // Namely add a class, then remove it.
        $code_sample.addClass("background-color-light-green");
        setTimeout(function(){remove_background_color($code_sample)}, 200);
        $code_sample.blur();
    }

    function handle_click($button){
        var code_sample_id = $button.attr("data-code-sample-id");
        var $code_sample = $("#code-sample-" + code_sample_id);
        blink_background_color($code_sample);
    }

    function handle_clipboard_buttons(){
        var $buttons = $(clippboard_buttons_class);
        $buttons.click(function(){
            handle_click($(this));
        });
    }

    handle_clipboard_buttons();

});

https://jsfiddle.net/0qg9rnao/

我想复制代码示例和闪烁背景颜色到访问者。

问题是:

代码示例似乎要么是被选中的,要么是被操碎的。 而且背景颜色不仅仅是可见的。

你能帮我一下吗?


共2个答案

匿名用户

为了更改高亮背景,您应该使用::selection伪元素。

null

$(document).ready(function() {
  // https://clipboardjs.com/

  var clippboard_buttons_class = ".clipboardjs-btn";
  var clipboard = new ClipboardJS(clippboard_buttons_class);

  function remove_background_color($code_sample) {
    $code_sample.removeClass("background-color-light-green");
  }

  function blink_background_color($code_sample) {
    // By blinking signal to user that the code is copied.
    // Namely add a class, then remove it.
    $code_sample.addClass("background-color-light-green");
    setTimeout(function() {
      remove_background_color($code_sample)
    }, 200);
    $code_sample.blur();
  }

  function handle_click($button) {
    var code_sample_id = $button.attr("data-code-sample-id");
    var $code_sample = $("#code-sample-" + code_sample_id);
    blink_background_color($code_sample);
  }

  function handle_clipboard_buttons() {
    var $buttons = $(clippboard_buttons_class);
    $buttons.click(function() {
      handle_click($(this));
    });
  }

  handle_clipboard_buttons();

});
.background-color-light-green::selection {
  background-color: lightgreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><span id="code-sample-foo" class="command prompt-win  command-text">django-admin startproject mysite
</span></div>

<button class="clipboardjs-btn" data-code-sample-id="foo" data-clipboard-target="#code-sample-foo">Copy</button>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

匿名用户

您可以使用::selection更改所选文本背景-颜色/颜色:

null

$( document ).ready(function() {
    // https://clipboardjs.com/

    var clippboard_buttons_class = ".clipboardjs-btn";
    var clipboard = new ClipboardJS(clippboard_buttons_class);

    function remove_background_color($code_sample){
        $code_sample.removeClass("background-color-light-green");
    }

    function blink_background_color($code_sample){
        // By blinking signal to user that the code is copied.
        // Namely add a class, then remove it.
        $code_sample.addClass("background-color-light-green");
        setTimeout(function(){remove_background_color($code_sample)}, 200);
        $code_sample.blur();
    }

    function handle_click($button){
        var code_sample_id = $button.attr("data-code-sample-id");
        var $code_sample = $("#code-sample-" + code_sample_id);
        blink_background_color($code_sample);
    }

    function handle_clipboard_buttons(){
        var $buttons = $(clippboard_buttons_class);
        $buttons.click(function(){
            handle_click($(this));
        });
    }

    handle_clipboard_buttons();

});
::selection {
  background-color: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><span id="code-sample-foo" class="command prompt-win  command-text">django-admin startproject mysite
</span></div>

<button class="clipboardjs-btn" data-code-sample-id="foo" data-clipboard-target="#code-sample-foo">Copy</button>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>