テキストエディタなどに絵文字を入れるような機能がありますよね。入れたい絵文字をクリックしたらテキストエディタへHTMLコードが入力されるような感じのやつです。 eventにpasteなどがあれば便利なんだろうけどもjQueryでは自分で実装します。
emoticonクラスのイメージアイコンをクリックしたらアイコンタグ内のpath attributeを読み込んでそれをtextareaに貼り付けます。意外と簡単なのですが、jQueryに標準で実装されてるんじゃないかと思ってしまうところが落とし穴です。普通に実装されていると思って探してしまいました。
$(function(){
var caret_pos;
function insertTextAtPosision(obj, pos, txt) {
obj.focus();
if (jQuery.support.opacity) {
var s = obj.value;
var np = pos + txt.length;
obj.value = s.substr(0, pos) + txt + s.substr(pos);
obj.setSelectionRange(np, np);
} else {
pos.text = txt;
pos.select();
}
}
function getCaretPosition(obj) {
obj.focus();
var pos;
if (jQuery.support.opacity) {
pos = obj.selectionStart;
} else {
pos = document.selection.createRange();
}
return pos;
}
$('.emoticon').click(function(){
path = '<img src="' + $(this).attr('path') + '" alt="'+ $(this).attr('alt') +'" />';
caret_pos = getCaretPosition($('#textarea_object'));
insertTextAtPosision(obj, caret_pos, path);
});
});
HTML側ではtextareaとimgを準備。
<textarea id="textarea_object"></textarea> <img src="/img/iconpath/iconfile.gif" path="/img/iconpath/iconfile.gif" src="" class="emoticon" alt="ICON NAME" />
