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

时间:2019-08-22 15:29:32

标签: javascript html autofocus

我找到了一种将光标置于自动对焦的字符串末尾的方法:

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

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

2 个答案:

答案 0 :(得分:5)

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

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)">

答案 1 :(得分:0)

据我所知,没有解决方案不修改输入内容。您可能出于以下我描述的原因不希望修改value,但是如果这样做,您将打开一个充满条件语句,浏览器兼容性问题以及使用户感到沮丧的潘多拉魔盒。

对此的最佳解决方案是使用CSS,因为它不会强迫您修改用户的输入值。但是,CSS仅允许您修改插入标记的颜色,而不是其位置。

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

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

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

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

相关问题