textarea文字列をタグで囲んだ後のカーソル表示

MyHome PortalのVer.3.11で、textareaへのタグ&アイコン挿入を改善しました。
textareaへのタグ&アイコン挿入には、
「textareaの選択範囲を取得し、前後に文字列を挿入する」
http://archiva.jp/web/javascript/getRange_in_textarea.html
のJavaScriptを使わせてもらっていましたが、タグ&アイコン挿入後に、カーソル(キャレット)が、textareaから出てしまったりしていました。タグ&アイコン挿入後も、カーソル(キャレット)がtextarea内に残るように、修正しました。カーソル(キャレット)が挿入タグの後ろに表示されるようにしました。
IEの場合、選択文字列をタグで囲んだ時には、挿入後のカーソル位置を決めるため、選択位置前の改行コードや、選択範囲内の改行コードの数を数える必要があるようです。
IEの場合、文字列を囲むのではなく、アイコン挿入など単に文字列挿入の場合、元のロジックでは行末と行頭の区別を付けることが出来ず、行頭にアイコン挿入が出来なかったので、シンプルに
var selection = document.selection.createRange();
selection.text = tag1 + tag2 + selection.text;
で、処理するようにしました。
これらにより、全体的に継ぎ接ぎ的なロジックになってしまいました。根本的にロジックを見直せば、もっとスッキリすると思われますが、とりあえず、これにてリリースしました。

以下に、修正版のJavaScriptソースを添付しておきます。
-------------------------------
function encloseTextArea(tag1, tag2, obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);
if (isIE && (tag2 == '' || pos.start == pos.end)) {
target.focus();
var selection = document.selection.createRange();
selection.text = tag1 + tag2 + selection.text;
return;
}
var val = target.value;
var range = val.slice(pos.start, pos.end);
var beforeNode = val.slice(0, pos.start);
var afterNode = val.slice(pos.end);
var insertNode;
if (range || pos.start != pos.end) {
insertNode = tag1 + range + tag2 ;
target.value = beforeNode + insertNode + afterNode;
} else if (pos.start == pos.end) {
insertNode = tag1 + tag2;
target.value = beforeNode + insertNode + afterNode;
}
target.focus();
if (isIE) {
r = target.createTextRange();
if (retmatch = beforeNode.match(/\r\n/g)) {
retnum = retmatch.length;
} else {
retnum = 0;
}
if (range) {
if (retmatch = range.match(/\r\n/g)) {
retnum += retmatch.length;
}
}
r.move('character', pos.end + tag1.length + tag2.length - retnum);
r.select();
} else {
var newpos = pos.end + tag1.length + tag2.length;
target.setSelectionRange(newpos, newpos);
}
}
function getAreaRange(obj) {
var pos = new Object();
if (isIE) {
obj.focus();
var range = document.selection.createRange();
var clone = range.duplicate();
clone.moveToElementText(obj);
clone.setEndPoint('EndToEnd', range);
pos.start = clone.text.length - range.text.length;
pos.end = clone.text.length - range.text.length + range.text.length;
} else if(window.getSelection()) {
pos.start = obj.selectionStart;
pos.end = obj.selectionEnd;
}
return pos;
}
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - textarea文字列をタグで囲んだ後のカーソル表示

theme : JavaScript
genre : コンピュータ

comment

Secret

プロフィール

ok.2nd

Author:ok.2nd
HomePage:
http://ok2nd.web.fc2.com/
Email: m.ok.2nd@gmail.com

最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2ブログランキング

FC2Blog Ranking

検索フォーム
カテゴリ
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ユーザータグ