J'ai cet extrait de code.

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

La console dit: Uncaught TypeError: Impossible de lire la propriété 'length' de undefined.

Comment puis-je afficher du texte dans le champ de saisie, mais lettre par lettre et non le texte entier à la fois, une fois le document entièrement chargé?

1
151RUM 8 mars 2016 à 16:24

5 réponses

Meilleure réponse

Je suppose que vous avez besoin d'une fermeture pour vous assurer que setTimeout a sa propre boucle, et vous devez augmenter le délai comme suit:

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

2
Norlihazmey Ghazali 8 mars 2016 à 13:35

Vous devez utiliser setInterval à la place.

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>
0
Rajesh 8 mars 2016 à 13:48

Pour en ajouter un de plus au mix;) récursivité avec une fonction locale:

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

Violon

0
Me.Name 8 mars 2016 à 14:15

Fonction récursive!

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

Si amusant!

Si vous vous demandez pourquoi votre code ne fonctionne pas, c'est parce que la boucle for continue de fonctionner et d'augmenter i, donc au moment où setTimeout frappe, i == text.length et cela vous donne la chaîne entière.

DEMO

0
vcanales 8 mars 2016 à 13:47

J'ai fait un exemple, j'espère que ça vous aide.

$(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">
0
rjsandim 8 mars 2016 à 13:58