点击时文本区域的表情符号

Posted 2023-05-07

【中文标题】点击时文本区域的表情符号

【英文标题】：smilies to textarea on click

【发布时间】：2012-06-19 17:07:21

【问题描述】：

我有一个小问题

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

这是我的 html 代码：

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

<div id="emoticons">
    <a href="#" title=":)"><img  border="0" src="/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img  border="0" src="/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img  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 代码使用外部 JS 文件... 你知道为什么代码没有在 NO WRAP - HEAD 模式下运行吗？ http://jsfiddle.net/JVDES/9/

感谢您的帮助

问候伯恩特

【问题讨论】：

哇，谢谢！！这么多答案！ :D 但我还有一个问题。所有代码中的问题都一样！示例：我写 HOHO 而不是单击 1st、2nd、3rd 笑脸 而不是单击光标 HOHO 并单击 第一个和第二个笑脸..你会看到最后一个笑脸不在正确的位置！在谷歌浏览器中，结果非常糟糕！在同一个例子中，表情符号的顺序是错误的。添加笑脸后有没有办法将光标设置到文本区域中？

【参考方案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;

对于您的示例，请查看 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。

【讨论】：

我对我的问题添加了评论！您的代码仍然存在一个小问题。感谢您的快速回复！问候伯尼

@bernte，我更新了我的答案并添加了将光标设置到文本区域的新功能。

完美！谢谢！我试图在 str 之间添加一个空格，但光标不在正确的位置。你有什么主意吗？我不知道我的更改是否匹配。更改：TextArea.value = before + " " + str + " " + after; 游标在 : 和 ) 之间 - jsfiddle.net/JVDES/15

@bernte 问题是您在字段中添加了另外 2 个字符（空格），但对于 setCursor() 函数，您不发送“它们”（表示 str 长度）。在这种情况下，您需要在 str 中添加空格，然后再将其分配给 textarea 并发送到 setCursor() 函数。见example。

Chrome 出现问题，当您频繁点击表情符号时，每个新的笑脸都比其他表情更早！！

【参考方案2】：

试试这个 - http://jsfiddle.net/JVDES/12/

插入符号位置功能的功劳归于 - https://***.com/a/1891567/981134

【讨论】：

我对我的问题添加了评论！您的代码仍然存在一个小问题。感谢您的快速回复！问候伯尼

【参考方案3】：

no wrap (head)和no wrap (body)的区别在于前者会尽快运行代码，后者会在页面加载完毕后运行代码。

在这种情况下，使用no wrap (head)，代码在“#emoticons a”存在之前运行。因此 $('#emoticons a') 返回 none 并且不附加点击处理程序。稍后，链接被创建。

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

有几种等效的方法可以做到这一点。 http://api.jquery.com/ready/

$(document).ready(handler)

$().ready(handler)（不推荐）

$(handler)

所以使用版本 3，我们有：

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

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

    );
);

http://jsfiddle.net/Nc67C/

【讨论】：

啊。我一定跳过了关于光标的部分。上面的答案似乎都不错，引用的线程 ***.com/questions/1891444/…> 也很好读。

【参考方案4】：

也试试这个...

$('#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);

);

在您发表评论后修正：

​

$('#emoticons a').click(
function()var smiley = $(this).attr('title');

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

$('#description').val(lStr+rStr);
$('#description').attr("selectionStart",lStr.length);                                     
);​

​

【讨论】：

我对我的问题添加了评论！您的代码仍然存在一个小问题。感谢您的快速回复！问候伯尼

我认为你应该使用.prop("selectionStart") 而不是.attr("selectionStart")