点击提交按钮时将下拉选择框自定义文本插入文本域的问题排查

DevOps 小满

2026-10-5

问题修复方案

核心错误原因

你使用了type="submit"的提交按钮绑定点击事件，浏览器触发点击事件后会立刻执行表单提交的默认行为，要么页面直接刷新/跳转导致你看不到赋值效果，要么还没等赋值逻辑执行完成就已经提交了修改前的旧内容
你写的onClick是大写写法，不符合HTML原生事件的小写规范，部分低版本浏览器可能无法正常识别绑定的函数

修复方法

你可以选择任意一种方式修改：

方式一：调整提交按钮的点击逻辑，赋值完成后再提交

修改提交按钮的onclick属性，先阻止默认提交行为，赋值完成后再手动触发表单提交：

<input type="submit" class="button" name="submit" value="Post reply" onclick="setText();event.preventDefault();this.form.submit();" tabindex="3" accesskey="s" />

方式二：改绑定下拉框的change事件，选完选项就自动填充

这种方式用户可以提前看到填充后的内容，确认之后再手动点提交，体验更好，不需要修改提交按钮的逻辑，只要给下拉框加onchange绑定即可：

<select id="tasks" onchange="setText()">
  <option value="texthere 1">forage</option>
  <option value="texthere 2">attack</option>
  <option value="texthere 3">defend</option>
</select>

可选优化

可以修改JS函数，避免用户多次操作导致前缀重复添加：

function setText() {
  var tasks = document.getElementById('tasks');
  var message = document.getElementById('message');
  var selectVal = tasks.value;
  // 仅当文本框内容还没有加过当前选中项的前缀时才添加
  if (!message.value.startsWith(selectVal)) {
    message.value = selectVal + message.value;
  }
}