1

after clicking on a button I am reading text within span tag and printing into the input box. here what I want to achieve is on clicking on the button I want to print the first character which is 'H' and after 1 sec pass, I want to print 'e' and so on till string finish. I want to use keyup and trigger jquery functionality within it.

till now what I tried is. any help really appreciated.

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div><span class="hello">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </span></div>
trigger above text here: <input type="text" name="fname" id="input1">
<button class="world">trigger</button>
<br>
<script>
$( ".world" ).click(function() {
setInterval(function(){
var hello = $( ".hello" ).text();
console.log(hello);
var a = $('#input1').trigger('keyup');
console.log(a); }, 1000);

});

</script>

</body>
</html>
timirq
  • 11
  • 2

2 Answers2

0

If I understand your question correctly, I don't think that you need keyup event. What you want is setting a delay and showing a single char one by one until reach the text's last char.

So split the whole text into an array and setTimeout for each char. To achieve this, I use an IIFE(immediately-invoked function expression) to create a closure.

For further reading about IIFE:
JavaScript closure inside loops – simple practical example 

$(".world").click(function() {
  var text = $(".hello").text().split("");
  for (let i = 0; i < text.length; i++) {
    setTimeout(function() {
      var value = $('#input1').val()
      $('#input1').val(value + text[i])
    }, 1000 * (i+1));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div><span class="hello">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </span></div>
trigger above text here: <input type="text" name="fname" id="input1">
<button class="world">trigger</button>
Hikarunomemory
  • 4,237
  • 2
  • 11
  • 21
0

You don’t actually need the keyUp event to accomplish what you are trying to do. You can simply use the length of the current input value, compared against the total length of the original text to help determine, and output the next character every second until the two match. Similar to the following example

HTML

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>  
  <div><span class="hello">Hjust a test </span></div>
  trigger above text here: <input type="text" name="fname" id="input1">
  <button class="world">trigger</button>
  <br>  
</body>
</html>

The JQuery/JavaScript

var setIntervalId = null;

function printNextChar(inputText){
    var currentInputLenth = $("#input1").val().length;

  if (currentInputLenth == inputText.length){
    stopInterval();
  } else{
    updateInput(inputText);
  }  
}

function updateInput(inputText){
    var input1 = $("#input1");

  var currentInputLength = input1.val().length;
  var currentInputValue = input1.val();
  var nextChar = inputText[currentInputLength];

  input1.val(currentInputValue + nextChar);
}

function stopInterval(){
    clearInterval(setIntervalId);
}

$(".world").click(function(){
  var startText = $( ".hello" ).text();

  setIntervalId = setInterval(printNextChar, 1000, startText);
})

https://jsfiddle.net/9vmptndo/

Let me know if that helps, thanks

Jason Anderson
  • 146
  • 6