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/
我想复制代码示例和闪烁背景颜色到访问者。
问题是:
代码示例似乎要么是被选中的,要么是被操碎的。 而且背景颜色不仅仅是可见的。
你能帮我一下吗?
为了更改高亮背景,您应该使用::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>