javascript - 单击时将笑脸转为 textarea

我有一个小问题

我想单击我的笑脸并将文本插入文本区域。
当我稍后想添加笑脸时，笑脸应该添加到光标位置而不是文本区域的末尾。

这是我的 html 代码:

<textarea id="description" name="description"></textarea>

<div id="emoticons">
    <a href="#" title=":)"><img alt=":)" border="0" src="/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img alt=":(" border="0" src="/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img alt=":o" border="0" src="/images/emoticon-surprised.png" /></a>
</div>

这是我的 JS 代码:

$('#emoticons a').click(function(){

    var smiley = $(this).attr('title');
    $('#description').val($('#description').val()+" "+smiley+" ");

});

在这里你可以看到结果(NO WRAP - BODY)
http://jsfiddle.net/JVDES/8/

我为我的 javascript 代码使用了一个 extern JS 文件...
你知道为什么代码没有在 NO WRAP - HEAD 模式下运行吗？
http://jsfiddle.net/JVDES/9/

感谢您的帮助

问候伯恩特

最佳答案

此外，您可以使用此功能:

function ins2pos(str, id) {
   var TextArea = document.getElementById(id);
   var val = TextArea.value;
   var before = val.substring(0, TextArea.selectionStart);
   var after = val.substring(TextArea.selectionEnd, val.length);
   TextArea.value = before + str + after;
}

对于您的示例，请查看 here 。

UPD 1:

要将光标设置在指定位置，请使用下一个函数:

function setCursor(elem, pos) {
   if (elem.setSelectionRange) {
      elem.focus();
      elem.setSelectionRange(pos, pos);
   } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
   }
}

我更新了 jsFiddle 上的代码，因此，要查看新示例，请查看 here 。

关于javascript - 单击时将笑脸转为 textarea，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11070830/