在输入字段中显示文本，字母对字母有延迟

Display text in input field letter for letter with delay

本文关键字：延迟 文本 输入 字段 显示      更新时间：2023-09-26

我有这个代码片段。

        <div class="content__img-txt">
          <a class="input-group">
          <input class="input-group-field" type="text">
          <div class="input-group-button">
            <input type="submit" class="button" value="&raquo;">
          </div>
        </div>

function showLetter (field, text, delay) {
        $(field).val(text.substring(0,1));
        for(var i = 2; i <= text.length; i++)
        {
            setTimeout(function(){
                $(field).val(text.substring(0,i));
            }, delay);
        }
    }
 showLetter (".input-group-field", "Show letter for letter with a delay of 1 second", 1000);

控制台显示：未捕获的类型错误：无法读取属性"长度" 的未定义。

文档

完全加载后，如何在输入字段中显示文本，但逐个字母而不是一次显示整个文本？

猜猜你需要一个闭包来确保 setTimeout 有自己的循环，你需要增加延迟，如下所示：

function showLetter(field, text, delay) {
  $(field).val(text.substring(0, 1));
  for (var i = 2; i <= text.length; i++) {
    (function(i) {
       setTimeout(function() {
          $(field).val(text.substring(0, i));
       }, (delay=delay+100));
    })(i)
  }
}
showLetter(".input-group-field", "Show letter for letter with a delay of 1 second", 1000);

演示

递归函数！

function showLetter (field, text, position, delay) {
  if (position >= text.length) {
      return false;
  }
  var current = text.substring(0,position);
  setTimeout(function(){
    $(field).val(current+text[position]);
  }, delay);
  return showLetter(field,text,position+1,delay+1000)
}
showLetter (".input-group-field", "Show letter for letter with a delay of 1 second", 0, 1000);

真好玩！

如果你想知道为什么你的代码不起作用，那是因为 for 循环继续运行并增加i，所以当setTimeout命中时，i == text.length，它给你整个字符串。

演示

你应该

改用setInterval。

function showLetter(field, text, delay) {
  $(field).val(text.substring(0, 1));
  var interval = setInterval(function() {
    var len = ($(field).val().length || 0) +1;
    $(field).val(text.substring(0, len));
    
    if(len === text.length)
      window.clearInterval(interval);
  }, delay);
}
showLetter(".input-group-field", "Show letter for letter with a delay of 1 second", 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="content__img-txt" style="float:left;margin-top:20px;">
  <a class="input-group">
    <input class="input-group-field" type="text">
    <div class="input-group-button">
      <input type="submit" class="button" value="&raquo;">
    </div>
</div>

我举了一些例子，希望对您有所帮助。

$(document).ready(function() {
  
  var TIME_OUT = 1000;
  
  var showTextWithDelay = function(element, text) {
    
    var lengthOfSubtext = 0;
    var printer = setInterval(function() {
      
      if (lengthOfSubtext >= text.length) {
        clearInterval(printer);  
      }
      
      var subtext = text.substring (0, lengthOfSubtext);
      element.val(subtext);
      lengthOfSubtext++;
      
     }, TIME_OUT);
     
  };
                   
  
  var inputElement = $('#field');
  var text = "This is an example!";
  showTextWithDelay(inputElement, text);
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="field">

在组合中添加一个 ;)使用本地函数递归：

function showLetter(field, text, delay) {
  var ind = 1;
  var shownext = () => { 
    $(field).val(text.substring(0,ind));     
    if(ind++ < text.length) setTimeout(shownext,delay);
  };
  shownext();
}

小提琴

相关文章：