解决input输入框双击选中单词时附带多余空格的问题

直接上可行方案：通过监听输入框的双击事件，手动修正选中范围，剔除选中内容末尾的空格。

完整代码示例：

<input type="text" class="input" placeholder="">

.input {
  width: 400px;
}

// 初始化输入框内容
document.querySelector('.input').value = 'Double click on words without extra space';

// 监听双击事件
document.querySelector('.input').addEventListener('dblclick', function(e) {
  const input = e.target;
  const start = input.selectionStart;
  let end = input.selectionEnd;

  // 从选中的结束位置往前找，跳过所有尾随空格
  while (end > start && input.value[end - 1] === ' ') {
    end--;
  }

  // 重新设置选中范围
  input.setSelectionRange(start, end);
});

逻辑说明 #

1. 双击事件触发后，先获取浏览器默认选中的起始和结束位置
2. 从结束位置向前遍历，把选中内容末尾的连续空格全部排除在选中范围外
3. 调用setSelectionRange重新设置选中区域，只保留纯单词内容

这个方案不会干扰输入框的其他正常交互，仅修正双击选中的行为，完美解决除最后一个单词外，其他单词双击时会带尾随空格的问题。

内容的提问来源于stack exchange，提问作者Raol mAX