On a HTML input field that has some padding defined, clicking on the padding area sets the cursor at the beginning of the line and not at the end.
Why is that happening? What would be a use case for this behaviour? Any idea on how to prevent this and move always the cursor at the end of the line?

<input style="padding:25px;font-size:25px" value="hello" />

On a HTML input field that has some padding defined, clicking on the padding area sets the cursor at the beginning of the line and not at the end.
Why is that happening? What would be a use case for this behaviour? Any idea on how to prevent this and move always the cursor at the end of the line?

<input style="padding:25px;font-size:25px" value="hello" />

https://jsfiddle.net/sf4x3uzL/1

• javascript
• html
• css

• Tested in lastest Chrome and Firefox and Windows and works as expected. What browser are you testing in? – Marc Selman Commented Feb 11, 2020 at 9:30
• Any browser; you are supposed to click on the higher end of the input area, near the upper border – Manuel Bitto Commented Feb 11, 2020 at 14:38
• 1 I'm getting proper behavior in IE, Edge, Chrome and Firefox on Windows 10. This might be an OS-dependent issue. In any case, I wouldn't write code to try to fix it, as you might just break inputs and slow down devices where the issues isn't present. – Domino Commented Feb 12, 2020 at 5:03
• I, as well, seem to be unable to reproduce the issue on the browsers on my machine – Ashkan Pourghasem Commented Feb 12, 2020 at 8:42
• I can confirm that I was able to reproduce this on Mac. But on Windows, it works as most people would expect it to work. I agree with @Domino in that writing code to fix this might bring additional issues. – Mikayil Abdullayev Commented Feb 12, 2020 at 12:10

8 Answers 8

Check the snippet, the code is bit long but manages to work in all scenarios.

Here added a function to check if the click is from padding area from here

Added another function to get the caret position, and combined both function to get get the desired result.

var carPos = 0;
(function($) {
  var isPaddingClick = function(element, e) {
   	var style = window.getComputedStyle(element, null);
    var pTop = parseInt( style.getPropertyValue('padding-top') );
    var pRight = parseFloat( style.getPropertyValue('padding-right') );
    var pLeft = parseFloat( style.getPropertyValue('padding-left') );  
    var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    var x = parseFloat( e.offsetX );
    var y = parseFloat( e.offsetY );  
    return !(( x > pLeft && x < width - pRight) &&
             ( y > pTop && y < height - pBottom))
  }
  $.fn.paddingClick = function(fn) {
    this.on('click', function(e) {
      if (isPaddingClick(this, e)) {
      	e.target.setSelectionRange(carPos, carPos);
        fn()
      }
    })   
    return this
  }
}(jQuery));


$('input').paddingClick()
$('input').bind('click keyup', function(event){
		carPos = event.target.selectionStart;
})

.as-console{ display:none!important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input style="padding:25px;font-size:25px" value='hello' />

You can use setSelectionRange to set the position of the cursor to the end of the input element on click.

input.addEventListener('click', (e) => {
  // Do not do anything if the user already has a selection range,
  // for instance from a double click.
  const { selectionStart, selectionEnd } = input;
  if (selectionStart !== selectionEnd) return;
  
  const { length } = input.value;
  input.focus();
  input.setSelectionRange(length, length);
});

<input id="input" style="padding:25px;font-size:25px" value="hello" />

Try this !!

$("input").click(function(){
  this.focus();
});

You can use setSelectionRange to set the caret position at the end using [-1 , -1] position.

<input style="padding:25px;font-size:25px;border:1px solid #c0d9bc;outline:2px solid #6fae62" onclick="this.setSelectionRange(-1,-1)" value="hello" />

A simple solution is to set to 0 the vertical padding and adjust the line-height to get the correct height of the input.

This solution is suitable for input only: in case of textarea the huge line-height might be a problem.

<input style="padding:0 25px; line-height:3.48; font-size:25px" value="hello" />

I found this at stack only but seems to be a decent solution, which always sets the value and cursor to end of the text.

<input style="padding:25px;font-size:25px" value="hello" 
 onfocus="this.value = this.value;" />.

I hope this works for you

As far as I can tell, clicking on the padding is still as clicking on the <input> itself. It seems like what's happening next depends on some specific implementation in the Browser or the OS. For example, on macOS + Chrome it behaves the way you describe, but it may happen that in Windows it behaves differently. My approach would be a CSS only, though.

First, wrap your input within a label, this is important, so that if you click on the virtual padding the <input> will get the focus automatically.

<label class="custom-input">
  <input value='Hello' />
</label>

And finally the CSS:

.custom-input {
 display: inline-block;
 border: 1px solid #ccc;
 padding: 25px;
}

.custom-input > input {
  padding: 0;
  font-size: 25px;
  border: 0 none;
  outline: none;
}

https://jsfiddle.net/4ysdt7z0/17/

I can also reproduce this behavior on both Chrome and Safari, using a MacBook Pro.

My workaround for this, not tested cross-device but at least cross-browser, is to set the vertical spacing of the field using line-height, instead padding:

So instead of padding: .75rem;, I used:

padding: 0 .75rem;
line-height: 2.5rem;

This is not a complete fix, because clicking the border of the input will still set the cursor to index 0, but at least it works better for me than vertical padding.