稍有不同的点击一键复制指定内容的教程

之前我们发布过一篇WordPress网站通过 JS 代码实现点击按钮一键复制指定内容方法教程，不过当时介绍的方法，是以按钮的形式展现的，而且也没有短代码，使用起来稍有不便。

今天介绍的点击复制方法， 最终可实现“所见即所得”，也就是用户看到的内容就是点击复制的内容，比较适合一些“口令”类的信息，并且增加了一些隐现效果，具体可参考：

实现方法跟上个教程类似，不过这个教程做了一些简化，css部分也集成到了JS代码，添加更加简便了。

HTML 部分代码（添加到functions.php)

function copy_text_shortcode( $atts, $content = null ) {
$atts = shortcode_atts( array(
'color' => '',
'text' => '复制',
'class' => 'itemCopy',
'link' => '',
), $atts, 'copy_text' );

$style = '';
if ( ! empty( $atts['color'] ) ) {
$style = 'style="color: ' . esc_attr( $atts['color'] ) . ';"';
}

$link = '';
if ( ! empty( $atts['link'] ) ) {
$link = 'href="' . esc_url( $atts['link'] ) . '"';
$content_output = '<a ' . $link . '>' . $content . '</a>';
} else {
$content_output = $content;
}

return '<span class="' . esc_attr( $atts['class'] ) . '" data-clipboard-text="' . esc_attr( strip_tags( $content ) ) . '" ' . $style . '>' . $content_output . '</span>';
}

add_shortcode( 'copy_text', 'copy_text_shortcode' );

//下面部分貌似可省略
function enqueue_custom_scripts() {
wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

JS 部分代码有两种方案（利用 ClipboardJS 或 原生 JavaScript ）

js 部分代码可按照上篇教程添加到 footer.php ，如果主题自带添加自定义代码功能，也可以在主题设置中添加。

ClipboardJS

<script>
jQuery(function($) {
var clipboard = new ClipboardJS('.itemCopy');

$('.itemCopy').on('mouseenter', function() {
$(this).css('background-color', '#f2f2f2');
$(this).css('cursor', 'pointer');
}).on('mouseleave', function() {
$(this).css('background-color', '');
$(this).css('cursor', 'default');
});

clipboard.on('success', function(e) {
var hasLink = $(e.trigger).find('a').length > 0;
if (hasLink) {
var confirmOpen = window.confirm("已复制成功！是否打开链接？");
if (confirmOpen) {
window.open($(e.trigger).find('a').attr('href'), '_blank');
}
} else {
window.alert("已复制成功！");
}
});

clipboard.on('error', function(e) {
window.alert("复制失败！请手动复制。");
});
});
</script>

原生 JavaScript

<script>
jQuery(function($) {
$('.itemCopy').on('mouseenter', function() {
$(this).css('background-color', '#f2f2f2');
$(this).css('cursor', 'pointer');
}).on('mouseleave', function() {
$(this).css('background-color', '');
$(this).css('cursor', 'default');
}).on('click', function(event) {
event.preventDefault();
var text = $(this).data('clipboard-text');
var hasLink = $(this).find('a').length > 0;

var tempInput = document.createElement("textarea");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);

if (hasLink) {
var confirmOpen = window.confirm("已复制成功！是否打开链接？");
if (confirmOpen) {
window.open($(this).find('a').attr('href'), '_blank');
}
} else {
window.alert("已复制成功！");
}
});
});
</script>