当文本太长时，在文本框内模仿 "typing text" 和 jQuery

Question

我正在尝试使用 jQuery 创建一个用于输入文本的动画，但我遇到了一个问题，当文本太长时我可以看到所有输入的文本。当一个真实的人在打字时，文本框会保持文本的最后部分可见（我无法重现这种效果）。这是文本 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

我创建了基于. Here is the 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），此解决方案可能不起作用我已经在 IE11、Google Chrome 和 Firefox Windows 8.

上成功测试

当文本太长时，在文本框内模仿 "typing text" 和 jQuery

Imitating "typing text" with jQuery inside of a textbox when the text is too long

jquery

text

input

textbox

typing