在输入字段字母中显示文本，用于延迟字母答案

【问题标题】：Display text in input field letter for letter with delay在输入字段字母中显示文本，用于延迟字母
【发布时间】：2016-03-08 13:24:56
【问题描述】：

我有这个代码 sn-p。

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

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

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

【问题讨论】：

您介意向我们展示您的一些 html 标记吗？
在我的 Chrome 上运行良好。但文字显示在一起。
您确定控制台消息指向该代码吗？您的主要问题似乎是您的文本将一起显示，因为到您的超时执行时 i 将是字符串的长度，请参阅JavaScript closure inside loops – simple practical example

标签： javascript jquery input delay settimeout

【解决方案1】：

猜你需要一个闭包来确保 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);

DEMO

【讨论】：

非常感谢！！！甚至其他建议！只需添加一小段代码，像我这样的菜鸟就会很高兴;)
@Norlihazmey Ghazali。只是再添加一个问题，因为这对我来说很难实现。现在是否可以替换第一个文本，假设在它完全显示为新字符串 4 秒后。对不起我的英语不好^^
你的意思是这样吗：jsfiddle.net/norlihazmeyGhazali/pdntzpyp --> 值的第一个文本将更改为其他字符串
我的意思是改变整个句子，而不仅仅是第一个单词。假设我准备了 5 个场景，在第一个像我们之前一样加载后，我们在 3 秒后触发第二个，依此类推...... :)
你才是男人！！！！！！！！！！！！非常感谢 :) 我希望有一天我可以这样编码并理解它：P

【解决方案2】：

递归函数！

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 会为您提供整个字符串。

DEMO

【讨论】：

【解决方案3】：

您应该改用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>

【讨论】：

【解决方案4】：

我做了一些例子，希望对你有帮助。

$(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">

【讨论】：

【解决方案5】：

再添加一个；）使用局部函数递归：

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

Fiddle

【讨论】：