点击编辑按钮后如何选中input框的预填充值？

原生JavaScript 写法 #

假设你的输入框有明确ID（比如msgInput），编辑按钮的点击函数可以这么写：

function handleEditClick() {
  const inputElement = document.getElementById('msgInput');
  // 先聚焦输入框，再选中全部内容
  inputElement.focus();
  inputElement.select();
}

如果按钮和输入框是关联DOM结构（比如按钮是输入框的兄弟元素），可以通过事件对象定位输入框：

function handleEditClick(event) {
  // 根据实际DOM结构调整选择逻辑，这里示例按钮的前一个兄弟是输入框
  const inputElement = event.target.previousElementSibling;
  inputElement.focus();
  inputElement.select();
}

jQuery 写法 #

如果项目使用jQuery，代码可以更简洁：

$('.edit-button').click(function() {
  // 替换成你实际的输入框选择器
  const $input = $(this).closest('.item-container').find('.msg-input');
  $input.focus().select();
});

Vue.js 写法（2/3通用） #

在Vue项目中，可以通过ref操作DOM元素：

<template>
  <div>
    <input ref="msgInput" v-model="preFillMsg" type="text">
    <button @click="selectInputText">编辑</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const preFillMsg = ref('这是预填充的内容');
const msgInput = ref(null);

const selectInputText = () => {
  msgInput.value.focus();
  msgInput.value.select();
};
</script>

关键说明 #

• 必须先调用focus()：部分浏览器要求输入框处于聚焦状态，select()才能生效
• select()方法会直接选中输入框内的全部文本，满足直接编辑的需求

内容的提问来源于stack exchange，提问作者Anupam Kumar