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

Question

When clicking on an input with some text inside, normally the browser places the cursor/caret where you clicked within the text (beginning, end, in-between letters, etc). However, clicking the very top edge of the input always places the cursor at the beginning of the text, and clicking the bottom always places it at the end. I have to imagine this was intentional. It's consistent across all browsers. But it can easily be misleading/annoying when you go to click at the end of the text expecting to continue writing, but click just slightly too high and find the cursor at the start.

Video example: https://i.stack.imgur.com/VkNGA.jpg

I've seen plenty of answers addressing how to force the cursor to the end of the text in response to a focus event or some other trigger. However, I didn't find any that addressed only forcing the cursor to the end if that top edge is clicked. As far as I could tell there's no way to discern a top-edge click from a genuine click on the beginning of the text using either the click or focus events.

It'd also be great to know just out curiosity why this is the default behavior in the first place.

Welcome to stackoverflow. Please add your code in to snippet and describe your problem. Or must read https://stackoverflow.com/help/how-to-ask — jaydeep patel, Aug 07 '18 at 04:54
You may have very thoroughly described the problem, but it helps to see what you are attempting to describe in words. This is a "caret": `^`. While I have the idea that you actually meant "cursor," it is just this sort of thing that confuses people who are trying to help you when you don't provide a code example. Furthermore, you are asking people to go create the HTML to see the behavior for themselves, rather than doing it for them. Even if it's only an input box, that comes across as wanting to get help, but only if helpers do things your way. Not a good look. — BobRodes, Aug 07 '18 at 05:47
Since you're new, I went to the trouble of creating an input box myself and looking at the behavior. Sure enough, if you click anywhere within about a half millimeter of the top edge, the cursor goes to the beginning, and on the bottom, it goes to the end of the text. Never noticed it before. (more) — BobRodes, Aug 07 '18 at 06:09
I don't find it easy, personally, to be misled or annoyed by the behavior; I would simply reposition the cursor and click again. The behavior only occurs within about 2% of the available vertical space, so "click just slightly too high" seems an exaggeration to me. If you consider your goal to be to click in the center of the y-axis in the box, clicking "just slightly too high," or just over the vertical centerline, would still position the cursor where you want it. — BobRodes, Aug 07 '18 at 06:09
Good point that my question could have involved a visual representation of the problem. I decided to include a short video demonstrating what I meant. It seemed less helpful to include a codepen/live demo for one input. This behavior can be observed in any input including the comment box or the search bar at the top of stack overflow. Also, I explicitly made sure to use the word "caret" to avoid confusion with the mouse "cursor." And I did use the word correctly: https://en.wikipedia.org/wiki/Caret_navigation (1/2) — fafcrumb, Aug 07 '18 at 06:48
Though admittedly the vernacular here seems to be cursor, and ultimately I agree that would've confused less people. My video demonstration makes it pretty clear that there isn't a lot of room for error when placing the cursor. A very small adjustment that you would assume would place the cursor at the end actually places it at the beginning. I've done this accidentally many times. You're probably correct that users aren't going to find it much of a hassle, but the question was more for curiosity's sake. And if per chance it's solved simply, why not implement? (2/2) — fafcrumb, Aug 07 '18 at 06:53

score 0 · Accepted Answer · answered Aug 07 '18 at 06:23

I have used the internet for YEARS now and have never noticed this. Oblivious.

If you're looking to force the cursor (or caret depending on where you're from) to the end when the user clicks at the top of the input, I would use a strategy of comparing the coordinates of the click to coordinates of the bounds of the input on the click...

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();
    }
}

Hope this is helpful or that it gets you on the right track!

Great answer! Although I'll admit I'm a little disappointed my fears came true and there's no sanctioned native way to change it, this is still a very elegant javascript solution so thank you! — fafcrumb, Aug 07 '18 at 06:59
Sorry there isn't a better way that I know of. If you could accept my answer I'd appreciate it. I'm a n00b looking for rep :) — Travis, Aug 07 '18 at 20:03

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

1 Answers1