Question

我有此表格，并使用以下表格将其写入：

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

这会将值自动插入文本框中。

是否可以插入它来模拟用户书写？因此，一个接一个地插入字母，而不是一起插入吗？

Answer 1

检查是否适合您。它将一个接一个地插入字符，每个字符之间的延迟大约为300ms。

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

看看：

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-要写的文本，

element-元素的ID（例如val，不包含#），

speed-写入速度，以毫秒为单位。

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

是的，您可以使用内置的input方法模拟用户在setInterval字段中键入的内容，该方法会在延迟后重复调用函数。

这是一个演示：

在演示中，我实现了一个函数，该函数接收两个参数：   第一个参数是input元素的ID，第二个参数是   您要在该字段中写入的文本。

setInterval方法的第二个参数是延迟（   您可以更改为适合之后的回调函数）   您的需求。

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

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

4 个答案: