Question

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

以下是 Demo

希望你能提供帮助。

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

Typing Text in Jquery

Typing text animation using jQuery

Answer 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>

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

Answer 3

在我看来，这对我来说很好。我设置var pixelsPerLetter=5.5并且它有效。

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

当文本太长时，模仿文本框内的jQuery“键入文本”

3 个答案: