Javascript：Textareaを選択してから入力してください

Question

私はこれがちょっとしたスタンプと聞こえますが、ウェブページのいくつかの機能を簡単にテストできるように、簡単なコマンドを自動化できるjavascriptを作成できるかどうかを知りたいと思います。作ります。のは、私がどのように見える私のページでテキスト領域を持っているとしましょう：

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

今、私はJavaScriptコンソールを開き、次のないコマンド＆ペーストしたいと思います：

1. セットがに焦点を当てをテキスト領域。
2. テキストエリアの値を変更します
3. キーボードで「Enter」キーをシミュレートします。

私はセレンのような他のオートメーションを使うことができると知っていますが、これは私がショートカットにしたい単純なタスクです。これどうやってするの？私は純粋なjavascriptが好きですが、実際に必要な場合はjqueryを使用して作業することもできます。 jQueryを使って

Answer 1

それがこれを行うために非常に簡単です：あなたは、次のいずれかの発生前に各イベントが完全に処理させたい場合は、各ステップの非同期を行うことができます

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>