光标和字符串末尾之间的间距(自动对焦)

Question

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

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

但它被放在最后一个单词之后。我想在最后一个单词和光标之间留一个空格。不知道我现在应该怎么做。

Answer 1

您可以在焦点之前手动添加空格

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，除非你想动态地在输入末尾添加和删除空格，否则它也不会给你很多选择。出于各种原因，我建议不要使用附加方法，其中大部分都集中在用户体验和可访问性上。

如果您确实动态添加空间，则可以通过按退格键轻松删除它。您不应在用户编辑字段时重新添加空格，因为如果不小心，这可能会导致各种抖动、可访问性问题和覆盖。最重要的是，如果您在输入中添加一个空格，如果提交包含它的表单，它将保留在字段的值中。

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

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