Question

我想以编程方式在输入中添加单词，并始终查看文本的结尾。但问题是，当我在文本长度与输入长度几乎相同时添加单词（如input.value += 'word'）时，输入内的文本不会移动，所以我只看到开始文本和结尾被隐藏起来我想如果我可以将光标放到输入的末尾它会有所帮助，但光标无法在Chrome中工作，例如

input.value = input.value

或

input.setSelectionRange(input.value.length, input.value.length);

Answer 1

似乎运作良好：

＆＃13;

let input = document.getElementById('auto');
let sentence = 'Courage is the magic that turns dreams into reality.';
let index = 0;

setTimeout(function typing() {
  let letter = sentence.charAt(index++);

  input.blur();
  input.value += letter;
  input.focus();
  input.setSelectionRange(index, index);

  if (index < sentence.length) {
    let ms = Math.floor(75 + Math.random() * 150);

    setTimeout(typing, ms);
  }
}, 1000);

＆＃13;

<input id="auto" type="text">

＆＃13;

Answer 2

如果输入没有焦点，则Chrome会将其“滚动”显示在左侧，显示输入值的开头。

如果元素具有焦点，则可以设置选择范围以移动光标：

window.onload = function(){
  
  var input = document.getElementById('foobar');
  input.value += ' bazbat';
  
  input.focus();
  input.setSelectionRange( input.value.length - 1 );
  
}

<input id="foobar" value="foobar" size="6">

但如果用户试图键入值时光标移动，那将是一个非常令人困惑和令人沮丧的用户体验。

需要考虑的其他选择：

更改输入的宽度以匹配值。 make html text input field grow as I type?
在输入和跨度之间切换（编辑模式与读取模式）。使用跨度，您可以更好地控制文本的显示方式。 Jquery: Toggle between input and text on click
使用某种指示器提醒用户其输入值之一已被修改。即使他们可以看到整个值，这也很有用，因为他们可能没有注意到值已更新。

如何在以编程方式添加文本后显示输入中的文本结尾？

2 个答案: