JavaScript修改输入值后，将“滚动”到输入的末尾

Question

我有一个<input id="inp" type="text">，用户会在其中输入文本，并有时从字典中选择建议词汇。当选择了一个建议词汇后，我会执行以下操作：

var input = $('#inp'); 
input.val(input.val()+suggestedText+' '); 
input.focus(); // that is because the suggest can be selected with mouse

一切都很好，但是当添加建议后，使得结果中的input.val()太长而无法适应编辑字段时，光标位于字符串末尾（这很好），但是只有字符串开头在编辑字段中可见，所以光标也被隐藏了。

一旦按下一个键（改变值的键），“滚动”到字符串的末尾，隐藏了开头... 如何自动触发此行为，而无需按键？

我在这里找到了一个解决方案，但整个输入体验都会改变...

- user1983515

---

这是您需要的吗？https://dev59.com/JXRB5IYBdhLWcg3wyqKo祝您有美好的一天。 - John Alexander Betts

Answer 1

您尝试过以下方法吗：

var input = $('#inp'); 
input.val(input.val()+suggestedText+' '); 
input.focus(); // that is because the suggest can be selected with mouse

var height=input.contents()[0].outerHeight()
input.animate({
    scrollTop:height
},'normal');

?

- Jimmery

Answer 2

感谢大家的回答，与此同时我也找到了一些东西... 当使用鼠标点击输入框时，会失去焦点（点击其他地方），然后重新获得焦点（通过input.focus()）-“滚动”到末尾，但是当使用键盘选择建议时，焦点从未丢失，这就是为什么它没有自己“滚动”的原因。我只需在input.focus()之前添加input.blur()，现在完美运行...看看工作示例

http://46.4.128.78/input/

- user1983515

Answer 3

为了使其正常工作，您需要在设置值之前设置焦点() 。在许多方面，您可以解决此问题，例如：

input.focus(); // that is because the suggest can be selected with mouse
var input = $('#inp'); 
input.val(input.val() + suggestedText + ' ');

或者这个：

function changeValue(element, newValue) {
    element.focus();
    element.val(element.val() + newValue + ' ');
}

- Federico Leon

---

你的方法没有起作用... 因为事件是从输入字段内的键盘触发的，所以它已经获得了焦点... 我不得不模糊，然后重新聚焦才能使其工作... 请查看我下面提供的示例... - user1983515