Javascript:选择文本区域，键入然后输入

Question

我知道这听起来有点愚蠢.. 但我想知道我是否可以创建一个 javascript 来自动执行一些简单的命令，以便我可以轻松地测试我正在制作的网页中的某些功能。假设我的页面中有一个文本区域，如下所示:

<textarea class="some-class"></textarea>

现在我想打开 javascript 控制台并粘贴执行以下操作的命令:

1. 将焦点放在文本区域。
2. 改变文本区域的值
3. 在键盘上模拟按键“Enter”。

我知道我可以使用其他一些自动化功能，例如 Selenium，但这只是一个我想简化的简单任务。我怎样才能做到这一点？我更喜欢纯 javascript，但如果确实需要，也可以使用 jquery。

Answer 1

使用 jQuery 可以很容易地做到这一点:

function example() {
  $('.mytextarea')
    .focus()              // Sets focus on the text-area
    .val('CHANGE')        // Changes the value of the textarea
    .trigger("keydown", { // Trigger Enter (key 13) 
      which: 13
    });     
}

$('button').on('click', example);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="mytextarea"></textarea>
<button type="button">Run</button>

如果您希望每个事件在下一个事件发生之前被完全处理，您可以使每个步骤异步:

function step(cb, text) {
  $('#step').text(`${text}...`);
  return new Promise(
    resolve => setTimeout(() => {
      cb();
      resolve();
    }, 500)
  );
}

function example() {
  const $textarea = $('.mytextarea')
  step(() => $textarea.focus(), 'focusing')
  .then(() =>
    step(() => $textarea.val('CHANGE'), 'changing')
  )
  .then(() =>
    step(() => $textarea.trigger("keydown", {
      which: 13
    }), 'triggering')
  );
}

$('button').on('click', example);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="mytextarea"></textarea>
<button type="button">Run</button>
<i id="step"></i>