单击 html 文本输入的顶部或底部边缘时出现奇怪的光标放置行为

Question

当点击包含一些文本的输入时，浏览器通常会将 cursor/caret 放置在您在文本中点击的位置（开始、结束、中间字母等）。但是，单击输入的最上边缘始终将光标置于文本的开头，而单击底部始终将其置于末尾。我不得不想象这是故意的。它在所有浏览器中都是一致的。但是它很容易成为 misleading/annoying 当你去点击文本的末尾希望继续写，但是点击稍微太高并找到开始的光标。

视频示例：https://imgur.com/a/D6ex4VN

我看过很多关于如何将光标强制移动到文本末尾以响应焦点事件或其他触发器的答案。但是，我没有找到任何仅在单击顶部边缘时强制光标到末尾的解决方案。据我所知，使用 click 或 focus 事件无法区分顶部点击与文本开头的真正点击。

出于好奇，首先知道为什么这是默认行为也很棒。

Answer 1

我已经使用互联网多年了，但从未注意到这一点。没注意。

如果您希望在用户单击输入顶部时强制将光标（或插入符，取决于您来自哪里）结束，我会使用比较坐标的策略单击以单击输入边界的坐标...

handleTestClick = (event) => {
    // get the coordinates of the top edge of the input
    // from 
    const rectTop = event.target.getBoundingClientRect().top;
    // then get the coordinates of the click
    // from 
    const click = event.clientY;
    //test whether the click is close enough to the top to trigger cursor to beginning
    if(click - 5 <= rectTop) {
        this.moveCursorToEnd(event.target);
    }
}

// taken from https://davidwalsh.name/caret-end
// which draws from 
moveCursorToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

希望这对您有所帮助，或者让您走上正轨！

单击 html 文本输入的顶部或底部边缘时出现奇怪的光标放置行为

Odd cursor placement behavior when clicking on the top or bottom edge of an html text input

html

javascript

css

textinput

onfocus