4

我有一个小问题

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

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

感谢您的帮助

问候伯恩特

4

4 回答 4

7

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

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

对于您的示例，请看这里。


更新 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 上的代码，因此，要查看新示例，请查看此处。

于 2012-06-17T11:27:07.407 回答
3

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

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

于 2012-06-17T11:20:55.690 回答
3

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

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

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

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

  1. $(document).ready(handler)

  2. $().ready(handler)（不建议这样做）

  3. $(handler)

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

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

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

    });
});

http://jsfiddle.net/Nc67C/

于 2012-06-17T11:23:18.827 回答
2

也试试这个...

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

});

在您发表评论后修复：

​</p> 

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

​</p>

于 2012-06-17T11:26:35.130 回答