yuu_nkjm blog


2012-04-16(Mon) 編集

[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から文字列を書きかえるイベントを発行させた.そうしたところ,意図通り動いた.


トップ «前の日(04-15) 最新 次の日(04-17)» 追記 設定
2006|01|06|12|
2007|06|09|
2008|01|03|04|06|07|08|09|10|12|
2009|01|02|05|06|07|08|10|11|12|
2010|03|04|05|06|07|08|09|10|11|
2011|01|02|03|04|05|06|07|08|09|11|12|
2012|01|02|04|06|07|08|10|11|12|
2013|01|02|03|07|08|10|11|12|
2014|01|02|04|05|06|07|08|09|10|11|
2015|01|02|07|11|12|
2016|01|03|05|07|08|09|