MacOS Chrome/Safari textarea拖拽误选前置字符问题咨询

核心问题答复 #

1. 拖拽行为对齐方案 #

可以实现Chrome、Safari浏览器的textarea拖拽行为与Firefox、普通文本编辑器一致，你优化后的JS拦截方案已经覆盖了大部分使用场景，可补充以下优化点提升兼容性：

• 扩展UA判断覆盖Safari：该bug为WebKit内核共性问题，Safari也存在相同异常，可将判断逻辑修改为/Chrome|Safari/.test(window.navigator.userAgent) && !/Firefox/.test(window.navigator.userAgent)
• 替换坐标获取方式：将layerX/layerY替换为clientX/clientY，避免不同浏览器对相对父元素坐标的计算逻辑差异导致的偏移判断错误
• 优化行高计算逻辑：优先读取getComputedStyle(textarea).lineHeight获取行高，值为normal时再用canvas测量，减少自定义字体、自定义行高场景下的误差
• 兼容编辑器撤销栈：修改textarea.value后手动触发一次原生input事件，保证编辑器的撤销/重做功能正常运行

2. 相关标准与实现说明 #

该异常行为属于WebKit内核的实现缺陷，无公开标准或官方文档定义该逻辑：

• W3C拖拽标准仅规定了拖拽事件的生命周期、数据传输接口，未对编辑器内文本拖拽的字符选择、自动补空格规则做强制要求，属于浏览器自由实现的范畴
• WebKit为了优化词级拖拽体验，默认会尝试自动识别拖拽文本的边界空白字符并做插入适配，该实现存在bug导致会误捕获选中文本前的非空白字符（如换行符），自动补空格的逻辑为内核内部黑盒实现，无公开规则说明

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