Javascript 单击后，微笑显示到文本区域

我有一个小问题

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

这是我的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>

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

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

});

在这里可以看到结果（无包裹体）

我的javascript代码使用extern JS文件…
你知道为什么代码没有在无换行模式下运行吗？

谢谢你的帮助

关于bernte

试试这个-

---

插入符号位置函数的功劳归于-

无换行符（头部）和无换行符（正文）之间的区别在于前者将尽快运行代码，后者将在页面加载后运行代码

在这种情况下，如果

没有换行符（head）

，代码将在“#表情a”存在之前运行。因此，$（'#emoticons a'）不返回任何值，也不附加单击处理程序。稍后，将创建链接

因此，解决方案是告诉代码在加载页面时运行

有两种方法可以做到这一点

$（文档）.ready（处理程序）

$（）.ready（处理程序）

（不建议这样做）

$（处理程序）

因此，使用版本3，我们有：

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

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

    });
});

也试试这个

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

    var smiley = $(this).attr('title');

    var cursorIndex = $('#description').attr("selectionStart");
    var lStr =  $('#description').val().substr(0,cursorIndex);
    var rStr = $('#description').val().substr(cursorIndex);

    $('#description').val(lStr+" "+smiley+" "+rStr);

});

在您的评论之后修复：

​

---

​

此外，您还可以使用以下功能：

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;
}

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();
   }
}

举个例子，看

UPD 1:

要将光标设置在指定位置，请使用下一个功能：

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;
}

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();
   }
}

---

我更新了JSFIDLE上的代码，所以，要查看新示例，请看。

Ah。我一定跳过了有关光标的部分。上面的答案看起来都不错，引用的帖子也不错。哇，谢谢！！这么多答案但是我还有一个问题。所有代码中的问题都是一样的！示例：我写HOHO，然后单击第一个、第二个、第三个笑脸，然后单击HOHO前面的coursor，然后单击第一个和第二个笑脸。。你会看到最后一个微笑不在正确的位置！在谷歌chrome中，结果非常糟糕！在同一个例子中，微笑的顺序是错误的。有没有办法在添加笑脸后将coursor设置到文本区域？我在我的问题中添加了一条注释！您的代码仍然存在一个小问题。谢谢你的快速回复！贝尼在我的问题上加了一句话！您的代码仍然存在一个小问题。谢谢你的快速回复！我认为你应该使用

.prop（“selectionStart”）

而不是

.attr（“selectionStart”）

我给我的问题添加了一条评论！您的代码仍然存在一个小问题。谢谢你的快速回复！当做berni@bernte，我更新了我的答案，并添加了新功能，将光标设置到文本区域。这太完美了！非常感谢。我试图在str之间添加一个空格，但是光标不在正确的位置。你知道吗？我不知道我的更改是否匹配。更改：TextArea.value=before+“”+str+“”+after；coursor介于：和“-@bernte之间。问题是您在字段中添加了2个字符（空格），但在

setCursor（）

函数中，您不发送“它们”（表示

str

length）。在这种情况下，在将

str

分配给textarea并发送到

setCursor（）

函数之前，您需要向其添加空格。看，Chrome上有一个问题，当你频繁点击笑脸时，每一个新的笑脸都先于其他笑脸！！