如何通过选中并删除的方式清空文本框输入内容？已实现选中操作

我懂你的需求——不想直接用.val('')一步清空，而是要模拟用户手动选中内容再按删除键的真实交互流程，对吧？既然你已经搞定了内容选中的部分，那删除操作其实很简单，给你几种靠谱的实现方式：

方法1：用document.execCommand模拟删除动作 #

这是最贴近真实用户操作的方式，当输入框处于焦点且内容已被选中时，执行这个命令就相当于按下了删除键：

// 假设你已经通过自己的代码选中了输入框内容，这里可以先确保焦点和选中状态（可选）
const inputElement = $('#your-input-id')[0]; // 先拿到原生DOM元素
inputElement.focus();
inputElement.setSelectionRange(0, inputElement.value.length); // 确保全选内容（如果你已经选中可以跳过）

// 执行删除操作
document.execCommand('delete');

方法2：模拟键盘Backspace事件 #

如果你想完全模拟“按删除键”的行为，可以创建并触发一个键盘事件，不过要注意部分浏览器对模拟事件的限制：

const inputElement = $('#your-input-id')[0];
inputElement.focus();
inputElement.select(); // 快速全选内容

// 创建并触发Backspace按键事件
const backspaceEvent = new KeyboardEvent('keydown', {
  key: 'Backspace',
  bubbles: true,
  cancelable: true
});
inputElement.dispatchEvent(backspaceEvent);

方法3：jQuery链式调用简化版 #

如果你习惯用jQuery的写法，可以把选中和删除操作串起来：

$('#your-input-id')
  .focus() // 获取焦点
  .select() // 选中全部内容
  .get(0); // 拿到原生元素后执行删除
document.execCommand('delete');

补充说明 #

document.execCommand虽然被标记为过时，但对于这种简单的编辑操作，目前Chrome、Firefox、Edge等主流浏览器依然支持，完全能满足你的需求。如果追求更现代的API，也可以通过操作输入框的selectionStart和selectionEnd来删除选中内容，但execCommand的写法更简洁直观。

内容的提问来源于stack exchange，提问作者Mona Coder