它不起作用的主要原因是onclick()
属性不是编辑器中允许的属性。可能是出于安全原因。
另一种方法是在脚本中添加click事件。因此onclick="myFunction()"
, 添加ID,myButton
单击按钮,然后单击以下行:
var myButton = document.getElementById( \'myButton\' );
myButton.addEventListener( \'click\', myFunction );
然而,我遇到了麻烦,因为编辑器出于某种原因在脚本之间添加了div和样式。一种更安全的方法是定制
Shortcode.
此代码添加到函数中。php或自定义插件将创建一个短代码,您可以使用它输出HTML和JS,如下所示:
[copy_text]
代码为:
function wpse_298687_shortcode() {
// Start capturing output to return at the end.
ob_start();
?>
<input id="myInput" style="width: 600px;" readonly="readonly" type="text" value="Important Data">
<button onclick="myFunction()">Copy</button>
<script>
function myFunction() {
var copyText = document.getElementById(\'myInput\');
copyText.select();
document.execCommand(\'copy\')
alert(\'Data copied to clipboard\');
}
</script>
<?php
// Return captured output.
return ob_get_clean();
}
add_shortcode( \'copy_text\', \'wpse_298687_shortcode\' );
我已经对它进行了测试,效果很好。然而,有很多方法可以改进,我没有详细介绍,以免让人太困惑。
例如,如果多次使用此短代码,它将无法正常工作,因为输入和按钮以及ID和ID不应重复。理想情况下,代码将使用更通用的类。
多次使用它的另一个问题是,您将定义myFunction()
函数多次执行将引发错误。理想情况下,该脚本将存在于由短代码排队的单独文件中,以便所有使用短代码的用户共享一个脚本。这意味着脚本的编写应允许任何给定按钮从任何给定框复制文本。可能通过数据属性或共享父级。
这一切都变得相当复杂,所以现在只需关注使用短代码创建文本片段的能力,这些文本片段可用于从其他地方调用代码,这样它就不会受到编辑器的干扰。