当文本太长时，在文本框中使用 jQuery 模仿“键入文本”答案

【问题标题】：Imitating "typing text" with jQuery inside of a textbox when the text is too long当文本太长时，在文本框中使用 jQuery 模仿“键入文本”
【发布时间】：2016-02-06 13:54:03
【问题描述】：

我正在尝试使用 jQuery 创建用于键入文本的动画，但我遇到了一个问题，当文本太长时，我可以看到所有键入的文本。当真人打字时，文本框保持可见文本的最后部分（我无法重现该效果）。这是带有文本This an example with a very long text 的示例。 A 是我期望它完成后的样子，B 是它真正的样子。

这里是Demo

希望你能帮忙。

P.D.：我检查了其他主题，但即使它们很棒，我也在寻找更简单的东西。他们在这里：

Typing Text in Jquery

Typing text animation using jQuery

【问题讨论】：

标签： jquery text input textbox typing

【解决方案1】：

如果您决定要显示多少个字符，您可以从末尾减去这个值直到末尾执行子字符串函数在 javascript 中可能是这样的：

var view_characters=30;
var str = "This an example wit h a very long text";
var res = str.substring(str.length-view_characters, str.length);

function myFunction() {
    var view_characters=30;
    var str = "This an example wit h a very long text";
    var res = str.substring(str.length-view_characters, str.length);
    document.getElementById("demo").innerHTML = res;
}

<!DOCTYPE html>
<html>
<body>

<p>Click the button to extract characters from the string.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

</script>

</body>
</html>

【讨论】：

嗯，它看起来像一个选项（我不确定它在所有浏览器中的外观是否相同，但它可能是）。之后我需要发送一个带有示例文本的表单，这样文本就会被截断，但我可以做一些事情（有点棘手）来解决它。 编辑：现在，我记得我的网站是响应式的，但它无法正常工作。
更新：即使我有响应式设计，我也可以工作。我创建并回答了，所以请查看。

【解决方案2】：

我创建了基于dantella's answer 的响应式设计解决方案。这是demo。

HTML

<input id="input1" type="text" data-text="This is an example with a very long text" value="" style="width:200px;" />
<input id="input2" type="text" data-text="This is an example with a very long text" value="" style="width:150px;" />
<input id="input3" type="text" data-text="This is an example with a very long text" value="" style="width:100px;" />

Javascript

var func_showText = function (target, message, index, interval, pixelsPerLetter) {   
    if (index < message.length) {
    var maxLetters =  Math.round($(target).width()/ pixelsPerLetter);
    var str=$(target).val();
    if($(target).val().length > maxLetters){
        str=str.substring(str.length-maxLetters, str.length);
    }
        $(target).val(str+message[index++]);
        setTimeout(function () { func_showText(target, message, index, interval, pixelsPerLetter); }, interval);
    }
}

func_showText('#input1', $('#input1').attr('data-text'),0,200, 7.5);
func_showText('#input2', $('#input2').attr('data-text'),0,200, 7.5);
func_showText('#input3', $('#input3').attr('data-text'),0,200, 7.5);

【讨论】：

【解决方案3】：

在我看来很好。我设置了var pixelsPerLetter=5.5，它可以工作。

请注意，如果您对输入字段应用不同的字体大小，此解决方案可能不起作用（在上面的示例中，它使用的是font-size=12px）我已经在 Windows 8 上的 IE11、Google Chrome 和 Firefox 上测试成功。

【讨论】：

很好，感谢您在不同的浏览器上测试它。如果font-size只需要调整pixelsPerLetter，更大的font-size需要更多的pixelsPerLetter