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，除非您想动态地从输入的末尾添加和删除空格，否则JavaScript也不会给您很多选择。由于各种原因，我建议您不要采用附加方法，其中大多数都围绕用户体验和可访问性。

如果您要做动态添加空格，则可以通过按退格键轻松删除该空格。用户编辑字段时，请勿添加空格，因为这可能会引起各种抖动，可访问性问题，如果操作不当将导致覆盖。最重要的是，如果在输入中添加空格，则提交包含空格的表单时，它将保留在字段的值中。

最终，作为Web开发人员，输入字段的外观仅在部分范围内。这样做主要是为了确保每个页面上的功能尽可能清晰明了，同时仍允许 some 可视化自定义。尽管我认为您的用例非常合理，但是您正在冲破平台的限制。

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

光标和字符串末尾之间的空格（自动对焦）

2 个答案: