textarea/input拖拽选文本出框时选中内容跳至末尾的解决方法

核心结论 #

没有专门的CSS属性可直接控制文本框的拖拽选中行为，该异常通常是指针离开文本框后，浏览器默认选中逻辑被外部元素干扰导致。

方案1：拦截指针移动时的默认行为 #

当指针拖拽至文本框外时，浏览器会触发默认的选中范围调整逻辑，导致选中内容跳变。可通过标记选中状态，在pointermove中针对性阻止默认行为：

const textbox = document.getElementById("textbox");
let isSelecting = false;

textbox.addEventListener('pointerdown', e => {
    if (e.button === 1) { // 忽略中键操作
        e.preventDefault();
        return;
    }
    isSelecting = true;
    e.stopPropagation();
});

textbox.addEventListener('pointermove', e => {
    // 仅当文本框聚焦且处于选中状态时拦截
    if (isSelecting && document.activeElement === textbox) {
        e.preventDefault();
        e.stopPropagation();
    }
});

textbox.addEventListener('pointerup', e => {
    isSelecting = false;
    e.stopPropagation();
});

// 处理指针意外离开文本框的情况
textbox.addEventListener('pointerleave', e => {
    if (isSelecting) e.preventDefault();
});

方案2：正确使用setPointerCapture #

之前调用setPointerCapture无效，可能是调用时机或环境问题。调整调用逻辑，确保在pointerdown时立即捕获指针：

const textbox = document.getElementById("textbox");

textbox.addEventListener('pointerdown', e => {
    if (e.button === 1) {
        e.preventDefault();
        return;
    }
    textbox.setPointerCapture(e.pointerId); // 立即捕获指针
    e.stopPropagation();
});

textbox.addEventListener('pointerup', e => {
    if (textbox.hasPointerCapture(e.pointerId)) {
        textbox.releasePointerCapture(e.pointerId);
    }
    e.stopPropagation();
});

插件环境额外提示 #

由于是Figma插件场景，若上述方案无效，可尝试在事件处理中添加e.stopImmediatePropagation()，避免Figma内部事件逻辑干扰文本框的选中行为；同时检查父元素是否设置了pointer-events: none等可能影响指针交互的属性。

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