Space 在光标和字符串结尾之间（自动对焦）

Question

我找到了一种在自动对焦时将光标放在字符串末尾的方法：

<input name="adtitle" type="text" id="adtitle" value="Some value" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);">

但它紧跟在最后一个词之后。我希望在最后一个字和光标之间有一个 space。不知道我现在应该做什么。

Answer 1

您可以在焦点前手动添加一个space

function onFocus(e){
  e.value += e.value.endsWith(" ") ? "" : " ";
  e.setSelectionRange(e.value.length,e.value.length);
}

<input name="adtitle" type="text" id="adtitle" value="Some value" autofocus="" onfocus="onFocus(this)">

<!-- Or direct in the input -->
<input name="adtitle" type="text" id="adtitle" value="Some other value" autofocus="" onfocus="this.value = this.value + ' ';this.setSelectionRange(this.value.length,this.value.length)">

Answer 2

据我所知，没有不修改输入内容的解决方案。由于我在下面描述的原因，您可能不想修改 value，但如果您这样做，您将打开一个充满条件语句、浏览器兼容性问题和让用户感到沮丧的行为的潘多拉魔盒。

最好的解决方案是使用 CSS，因为它不会强制您修改用户的输入值。但是，CSS 只允许您修改插入符号的颜色，而不是它的位置。

剩下 JavaScript，除非您想在输入的末尾动态添加和删除 space，否则也不会为您提供很多选项。出于各种原因，我建议不要使用附加方法，其中大部分都以用户体验和可访问性为中心。

如果您动态添加 space，返回 space 即可轻松将其删除。当用户正在编辑字段时，您不应该添加 space 回来，因为这可能会导致各种抖动、可访问性问题以及如果不小心操作会导致覆盖。最重要的是，如果您将 space 添加到输入，如果提交包含它的表单，它将保留在字段的值中。

最终，输入字段的外观只是部分在您作为 Web 开发人员的控制之下。这样做主要是为了确保每个页面上的功能尽可能清晰明了，同时仍然允许一些视觉自定义。虽然我认为您在这里的用例非常合理，但您正在突破平台的限制。

要记住的另一件事是，如果您在 iFrame 中加载页面，由于旨在防止密码被盗的安全设置，您现有的焦点方法将无法在现代浏览器中使用。

Space 在光标和字符串结尾之间（自动对焦）

Space between cursor and the end of string (autofocus)

html

javascript

autofocus