yuu_nkjm blog

[JavaScript][Chrome] Textareaにテキストを入力する (テキスト入力イベントを与える)

JavaScriptを使って，テキストエリアに文字列を挿入したい，テキストエリアの文字列を書き換えたい．そんな時，Textareaのvalueを書きかえると，textareaのvalueが代わり，与えた値が表示される．また，textInputイベントを発行することでもTextareaに文字列を入れることが出来る．

// jQuery使ってます．後半パートでは参考サイトのソースを優先．
// targetTextAreaというidをもったtextareaを取得．
var element = $(targetTextArea); 
 
//textareaに表示される文字列(値)を変更するには，valを書きかえる．
element.val(data);
 
// focusがあるNodeをとって．
var fn = document.getSelection().focusNode;
// textarea(もしくはinput)を取って
var el = fn.getElementsByTagName('textarea')[0] || fn.getElementsByTagName('input')[0];
// textareaに"挿入文字列"を挿入
insert_text(el, "挿入文字列");
 
function insert_text(textarea, text){
     // TextEventを生成する．
     var textEvent = document.createEvent('TextEvent');
     // テキスト入力イベントを作成する．これに引数textが組み込まれる．
     textEvent.initTextEvent ('textInput', true, true, window, text);
     // 仮引数textareaに対して，作成したイベントをディスパッチする．
     textarea.dispatchEvent(textEvent);
}

なぜこれを調べたかというと，Facebookのtextareaにvalue書き換えにより文字列を与えて，その文字列を投稿させようとしたのだが，うまくいかなかったからだ．Facebookのhtmlを見るとTextareaへのkeypressイベントが何かに渡されている様に読めたので，Javascriptから文字列を書きかえるイベントを発行させた．そうしたところ，意図通り動いた．