模拟用户在文本框 javascript 中书写

Question

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?

Answer 1

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

Answer 2

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 (eg val , without # ),

speed - speed of writing in ms.

Answer 3

 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" /> 

Answer 4

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" /> 

Answer 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>