在html文本输入框中双击单词时，浏览器默认会将后续空格一并选中（除末尾单词外），影响用户体验。本文提供基于 `selection.modify()` 的标准化javascript方案，精准修正选区，确保仅选中目标单词本身。
当用户在 <input type="text"> 中双击某个单词时，现代浏览器（Chrome、Edge、Firefox）的默认行为是：以空格为分隔符进行“词级选择”，但其算法会将单词右侧紧邻的空格也纳入选区——这导致 selection.toString() 返回如 "click "（含末尾空格），而非预期的 "click"。该问题虽不影响功能，却干扰复制、高亮反馈及自动化操作。
幸运的是，Web API 提供了精细控制光标与选区的能力。核心解决方案是监听 dblclick 事件，在检测到选中内容末尾存在空格时，主动向左扩展选区一个字符，从而剔除冗余空格：
const inputElement = document.querySelector('.input');
inputElement.value = 'Double click on words without extra space';
inputElement.addEventListener('dblclick', function (event) {
// 获取当前选区（注意：input 元素内 window.getSelection() 返回空对象，
// 实际需使用 input 的 selectionStart/selectionEnd 属性）
const { selectionStart, selectionEnd } = this;
const value = this.value;
// 安全检查：确保有有效选区
if (selectionStart === selectionEnd) return;
const selectedText = value.slice(selectionStart, selectionEnd);
// 检查是否以空格结尾（且非全空格）
if (/s+$/.test(selectedText) && selectedText.trim()) {
// 向左收缩选区：将结束位置左移一位
this.setSelectionRange(selectionStart, selectionEnd - 1);
}
});⚠️ 重要说明：
- 原答案中误用了 window.getSelection() —— 在 <input> 或 <textarea> 中，应直接操作元素自身的 selectionStart / selectionEnd 属性，因为 window.getSelection() 针对文档级内容（如 <div contenteditable>），对表单控件无效；
- 使用 setSelectionRange() 是兼容性更好、语义更明确的方式，避免依赖较新或部分支持的 Selection.modify()（Safari 对其 character 粒度支持不稳定）；
- 正则 /\s+$/ 可匹配多个尾随空白符（空格、制表符等），增强鲁棒性；
- 添加 selectedText.trim() 判断可防止全空白选区被误处理。
✅ 效果验证：双击 "click" 后，选区精确为 "click"（长度5），而非 "click "（长度6）。复制粘贴、document.execCommand('copy') 或后续逻辑均可获得干净单词。
此方案无需第三方库，原生 JavaScript 即可实现，兼容所有主流浏览器（IE11+），是修复输入框双击选词空格问题的轻量、可靠、生产就绪方案。
