单击输入字段的填充将光标设置在行首，而不是行尾

Question

在定义了一些填充的 HTML 输入字段上，单击填充区域会将光标设置在行首而不是行尾。
为什么会这样？这种行为的用例是什么？关于如何防止这种情况并始终将光标移动到行尾的任何想法？

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

https://jsfiddle.net/sf4x3uzL/1

Answer 1

检查代码片段，代码有点长，但可以在所有场景下工作。

这里添加了一个函数来检查点击是否来自此处的填充区域

添加了另一个函数来获取插入符位置，并将这两个函数组合起来以获得所需的结果。

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' />