为什么评论编辑页面上的<按钮>会提交页面?

时间:2021-09-08 作者:dtw

我跟着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);
}

1 个回复
最合适的回答,由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.