javascript - js修改输入值后“滚动”到输入的末尾

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()太长而无法放入编辑字段时，光标位于字符串的末尾（这很好），但只有字符串的开头在编辑中可见字段，所以光标也被隐藏了。

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

我在这里找到了一个解决方案- 但它并不好，因为整个输入体验都发生了变化......

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');

?

Answer 2

谢谢大家的回答，同时我也发现了……当使用鼠标单击输入时失去焦点（单击其他），然后重新获得它（感谢input.focus（））-“滚动”到最后，但是当使用键盘选择建议时，焦点永远不会丢失，这就是它本身不是“滚动”的原因。我只是在 input.focus() 之前添加了 input.blur()，现在就像一个魅力......看看工作示例

http://46.4.128.78/input/

Answer 3

要完成这项工作，您需要在设置值之前设置 focus() 。您可以通过多种方式解决此问题，例如：

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 + ' ');
}