I have this form and I write into it using:

document.getElementById("val").value ="value";

This inserts the value automatically into the textbox.

Is it possible to insert it simulating user writing? So inserting a letter one by one and not all together?

I have this form and I write into it using:

document.getElementById("val").value ="value";

This inserts the value automatically into the textbox.

Is it possible to insert it simulating user writing? So inserting a letter one by one and not all together?

• javascript
• html

• you could use timer and write characters one by one... is that what you are trying to do? – gp. Commented Sep 23, 2018 at 13:33
• w3schools./howto/howto_js_typewriter.asp – ℛɑƒæĿᴿᴹᴿ Commented Sep 23, 2018 at 13:40
• Duplicate: stackoverflow./questions/19912375/javascript-typing-effect – user7289982 Commented Sep 23, 2018 at 13:42
• Possible duplicate of Javascript typing effect – user7289982 Commented Sep 23, 2018 at 13:43

5 Answers 5

An example that allows an onset delay, interresponse-time between keystrokes, preservation of cursor position, as well as native change event triggers:

let target = document.getElementById('testarea')
target.selectionStart = 30;
target.focus();

/**
 * simulateTextareaInput
 * @param id {string} The id of the textarea to target.
 * @param text {string} The text to input, character-by-character.
 * @param lat {number} The latency / time to wait before beginning input.
 * @param irt {number} The interresponse-time between each input / simulated keystroke.
 */
const sim = function (id, text, lat, irt) {
    const length = text.length-1;
    var current = 0;
    /**
     * insertText
     * @param str {string} The character to input into the text area
     */
    const insertChar = function(char) {
        // get element
        var target = document.getElementById(id);
        if (target !== null) { // if it is found in the dom ...
            let [start, end] = [target.selectionStart, target.selectionEnd];
            // insert char
            target.setRangeText(char, start, end, 'select');
            // move cursor forward 1
            target.selectionStart = start+1;
            // trigger any onChange listeners
            var event = new window.Event('change', { bubbles: true });
            target.dispatchEvent(event);
        } else {
            console.log(`No <textarea> with id "${id}" found.`)
        };
    };
    const write = function() {
        // insert current character
        insertChar(text[current]);
        if(current < length) { // so long as there are more chars to input
            current++; // increment
            setTimeout(function(){write()},irt); // recurisvely write next char
        };
    };
    setTimeout(function(){
        // kickoff input 
        setTimeout(function(){write()},irt)
    },lat); // wait this long before starting
};

sim('testarea','this text was simulated after 2s -- cool!',2000,50);

textarea {
  width: 500px;
  height: 100px;
}

<!-- begin demo -->

<textarea id='testarea'>
hello world
simulated output: 
new text will appear on the above line
</textarea>

Check if this works for you. It will insert the character one by one with delay of around 300ms between each character.

var word = "value";
var n = 0;
var x = document.getElementById("val");

(function loop() {
  x.value += word[n];
  if (++n < word.length) {
    setTimeout(loop, 300);
  }
})();

<input type="text" id="val">

Take a look on it:

function typeWriter(txt, element, speed, i=0) {
    if (i < txt.length) {
        document.getElementById(element).innerHTML += txt.charAt(i);
        i++;
        setTimeout(function() {typeWriter(txt, element, speed, i);}, speed);
    }
}

txt - Text to write,

element - id of element (e.g val, without #),

speed - speed of writing in ms.

const input = document.getElementById("val");
input.select(); 

const textMessage = "The message that you want to display";
let currentIndex = 0;
const delay = 400;

const writeText = function() {
  input.value += textMessage[currentIndex];
  if (currentIndex < textMessage.length - 1) {
    currentIndex++;
    setTimeout(function() {
      writeText()
    }, delay * Math.random());
  } else {
    return
  }
}

writeText()

<input id="val" type="text" />

Yes you can simulate a user typing in an input field, by using the built-in setInterval method which repetitively calls a function after a delay.

Here's a demo:

In the demo, I implemented a function that receives two arguments: the first argument is the input element's ID and the second one is the text that you want to be written in that field.

The setInterval method's second argument is the delay(the time which the callback function is called after) which you can change to suit your needs.

function simulateWriting(inputId, val) {
  var inp = document.getElementById(inputId),
  i = 0,
  l = val.length,
  intervalId = setInterval(function() {
    (i < l) ? inp.value += val[i++]:clearInterval(intervalId);
  }, 500);
}

// calling the function with input id=input-val and value='some value'.
simulateWriting('input-val', 'some value');

<input type="text" id="input-val" />