检查代码片段，代码有点长，但在所有情况下都能工作。
这里添加了一个函数来检查点击是否来自here的填充区域
添加了另一个函数来获取插入符号位置，并将这两个函数结合起来以获得所需的结果。
第一个

您可以使用setSelectionRange将光标位置设置为单击时input元素的末尾。
第一个

试试这个！！

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

您可以使用setSelectionRange在结尾处使用[-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" />

一个简单的解决方案是将垂直填充设置为0，并调整行高以获得正确的输入高度。
此解决方案仅适用于输入：在文本区域的情况下，巨大的行高度可能是个问题。

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

我发现这只在堆栈，但似乎是一个体面的解决方案，它总是设置值和光标的文本结束。

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

我希望这对你有用

就我所知，点击填充仍然是 * 就像 * 点击<input>本身一样。似乎接下来会发生什么取决于浏览器或操作系统中的一些特定实现。例如，在macOS + Chrome上，它的行为方式与您描述的一样，但在Windows中，它的行为方式可能会不同。不过，我的方法只会是CSS。
首先，将您的输入封装在标签中，这一点很重要，这样，如果您单击 * 虚拟填充 *，<input>将自动获得焦点。

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

最后是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/

我也可以使用MacBook Pro在Chrome和Safari上重现这种行为。
我的解决方法是使用行高而不是填充来设置字段的垂直间距，这不是跨设备测试的，但至少是跨浏览器测试的：
因此，我使用的不是padding: .75rem;，而是：

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

这并不是一个完整的修复，因为单击输入的边框仍然会将光标设置为索引0，但至少它比垂直填充对我来说效果更好。