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

Question

当单击包含某些文本的输入时，通常浏览器会将光标/插入符号放置在文本中单击的位置（开头、结尾、字母之间等）。但是，单击输入的最上边缘始终会将光标置于文本的开头，而单击底部始终将光标置于文本的末尾。我不得不想象这是故意的。它在所有浏览器中都是一致的。但是，当您单击文本末尾并希望继续编写，但单击稍微太高并在开头找到光标时，很容易产生误导/烦人。

视频示例：https://i.sstatic.net/VkNGA.jpg

我已经看到很多关于如何强制光标移动到文本末尾以响应焦点事件或其他触发器的答案。但是，我没有找到任何解决仅在单击顶部边缘时将光标强制到末尾的问题。据我所知，使用

click

或

focus

事件无法区分顶部边缘点击和文本开头的真实点击。

出于好奇，如果一开始就知道为什么这是默认行为，那就太好了。

Answer 1

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

如果您希望在用户单击输入顶部时强制将光标（或插入符号，具体取决于您所在的位置）移动到末尾，我将使用一种策略，将单击的坐标与单击时输入的边界...

handleTestClick = (event) => {
    // get the coordinates of the top edge of the input
    // from https://stackoverflow.com/questions/442404
    const rectTop = event.target.getBoundingClientRect().top;
    // then get the coordinates of the click
    // from https://stackoverflow.com/questions/23744605
    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 https://stackoverflow.com/questions/3356770
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();
    }
}

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

Answer 2

或者您可以将输入的行高增加到输入的高度。