RSS

タグ別アーカイブ: Javaスクリプト

テキストエリアの内の選択範囲を取得、加工

textareaの選択範囲を取得し、前後に文字列を挿入する

Javaスクリプト


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;
// alert(pos.start + "," + pos.end);
}
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);

function surroundHTML(tag, obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);

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 = '<' + tag + '>' + range + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}

else if (pos.start == pos.end) {
insertNode = '<' + tag + '>' + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
}

フォームまわり

<form action="" method="post" id="testForm" onsubmit="">
<p>
<a href="javascript:void(0);" onclick="surroundHTML('p','testedit');">&lt;p&gt;</a> |
<a href="javascript:void(0);" onclick="surroundHTML('a','testedit');">&lt;a&gt;</a> |
<a href="javascript:void(0);" onclick="surroundHTML('strong','testedit');">&lt;strong&gt;</a><br />
<textarea name="text" cols="42" rows="16" name="text" id="testedit">テスト</textarea>
</p>
</form>
広告
 
コメントする

投稿者: : 2011/09/10 投稿先 Codes

 

タグ: