Как программно набрать contenteditable элемент HTML - PullRequest
Новая
       146

Как программно набрать contenteditable элемент HTML

3 голосов
/ 03 мая 2020

Мне нужно смоделировать взаимодействие пользователя, набирающего текст в элементе contenteditable HTML.

Я не могу использовать такие вещи, как element.onkeypress() или element.fire().

Я не могу изменить реальный код или содержимое элемента, используя element.innerHTML или element.textContent.

Мне нужен способ имитировать ввод в него.

Кстати, это для YouTube .

Ответы [ 3 ]

3 голосов
/ 03 мая 2020

Вы можете использовать Document.execCommand() с командой insertText , которая также автоматически запускает input событий : 

const editor = document.getElementById('editor');

editor.oninput = (e) => console.log('Input');

setTimeout(() => {
  editor.focus();
  
  document.execCommand('insertText', false, 'Inserted text...\n\n');
}, 1000);
body {
  display: flex;
  flex-direction: column;
  font-family: monospace;
}

#editor {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .125);
  border-radius: 2px;
  min-height: 64px;
  padding: 16px;
  outline: none;
}
<div id="editor" contenteditable="true"></div>

Однако обратите внимание, что в настоящее время оно устарело и даже до того, как оно стало несовместимым в разных браузерах (аналогично contenteditable):

Устаревший

Эта функция устарела. Хотя он все еще может работать в некоторых браузерах, его использование не рекомендуется, поскольку его можно удалить в любое время. Старайтесь не использовать его.

1 голос
/ 03 мая 2020

Вы можете сделать что-то вроде этого: 

const element = document.querySelector('div');

const text = "This is my text";
var i = 0;

function type() {
    setTimeout(function() {
    element.textContent += text.charAt(i);
    i++;
    if (i < text.length) {
      type(); 
    }
  }, 500)
}

type();    
<div contenteditable="true"></div>

Похоже, что пользователь медленно набирает в div. Вы можете настроить скорость, изменив аргумент 500.

0 голосов
/ 03 мая 2020

Если вам просто нужно смоделировать ввод пользователя, вы можете использовать скриптовые браузеры, такие как кукловод. Это пакет nodejs, он дает вам браузер, которым вы можете управлять из своего кода, и в нем есть именно то, что вам нужно. Вы даже можете контролировать скорость набора текста и т. Д. c.

Вот пример кода, который открывает страницу Google и вводит текст "Hello world: D" в поле поиска 

const puppeteer = require("puppeteer");

async function main() {
  let browser = await puppeteer.launch();
  let page = await browser.pages().then((pages) => pages[0]);
  await page.goto("https://google.com");
  await page.type('input[name="q"]', "Hello world :D", {
    delay: 50
  });
}

main();
...