我跟着this guide to add a "copy to clipboard" button 在编辑评论页面上(Comment.php?action=editcomment)
它可以工作,但它也会提交页面(即页面重新加载回评论列表),但我不明白为什么。
这是html:<input type="hidden" value="This is copied" id="civicrm-subject-code-field"><button class="ed_button button button-small" onclick="copy_civicrm_subject_code()">Copy</button>
这是JS:
async function copy_civicrm_subject_code() {
/* Get the text field */
var copyText = document.getElementById("civicrm-subject-code-field");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
await navigator.clipboard.writeText(copyText.value);
}
最合适的回答,由SO网友:Jacob Peattie 整理而成
之所以会发生这种情况,是因为整个评论编辑页面位于<form>
元素,以及<button>
元素提交它所属的任何表单。这是HTML中按钮的正常行为。
如果不希望按钮充当提交按钮,则需要设置type
把某事归因于某人button
:
<button class="ed_button button button-small" onclick="copy_civicrm_subject_code()" type="button">
Copy
</button>
默认值
type
按钮的属性为
submit
, 这就是为什么如果不将其设置为
button
.