javascript 单击时笑脸到 textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11070830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
smilies to textarea on click
提问by bernte
I have a little question
我有一个小问题
I want to click on my smileys and insert the text to the textarea. and when I want to add a smiley later, the smiley should be added to the cursor position and not at the end in the textarea.
我想单击我的笑脸并将文本插入文本区域。当我稍后想添加笑脸时，笑脸应该添加到光标位置而不是文本区域的末尾。
This is my htmlcode:
这是我的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>
This is my JScode:
这是我的JS代码：
$('#emoticons a').click(function(){
var smiley = $(this).attr('title');
$('#description').val($('#description').val()+" "+smiley+" ");
});
Here you can see the result (NO WRAP - BODY) http://jsfiddle.net/JVDES/8/
在这里你可以看到结果（NO WRAP - BODY） http://jsfiddle.net/JVDES/8/
I use an extern JS file for my javascript-code...
Do you know why the code isn't running in NO WRAP - HEAD mode?
http://jsfiddle.net/JVDES/9/
我为我的 javascript 代码使用了一个 extern JS 文件...
你知道为什么代码没有在 NO WRAP - HEAD 模式下运行吗？
http://jsfiddle.net/JVDES/9/
Thanks for helping
谢谢你的帮助
Regards bernte
问候伯恩特
回答by Victor
Also, you can use something this function:
此外，您可以使用此功能：
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;
}
For your example, look here.
对于您的示例，请查看此处。
UPD 1:
更新 1：
To set cursor at specified position, use the next function:
要将光标设置在指定位置，请使用下一个函数：
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();
}
}
I updated code on jsFiddle, so, to view new example, look here.
我更新了 jsFiddle 上的代码，因此，要查看新示例，请查看此处。
回答by Zoltan Toth
Try this - http://jsfiddle.net/JVDES/12/
试试这个 - http://jsfiddle.net/JVDES/12/
Credit for the caret position function goes to - https://stackoverflow.com/a/1891567/981134
插入符号位置功能的功劳转到 - https://stackoverflow.com/a/1891567/981134
回答by Liyan Chang
The difference between no wrap (head)and no wrap (body)is that the former will run the code as soon as possible and the latter will run the code after the page has loaded.
之间的区别no wrap (head)，并no wrap (body)在于，前者将运行代码尽快与后者将运行代码的页面加载后。
In this case, with no wrap (head), the code is being run before '#emoticons a' exists. Thus $('#emoticons a') returns none and does not attach the click handler. Later, the link is created.
在这种情况下，使用no wrap (head)，代码在“#emoticons a”存在之前运行。因此 $('#emoticons a') 返回 none 并且不附加点击处理程序。稍后，链接被创建。
Thus, the solution is to tell the code to run when the page is loaded.
因此，解决方案是告诉代码在页面加载时运行。
There are a couple, equivalent ways of doing this. http://api.jquery.com/ready/
有几种等效的方法可以做到这一点。http://api.jquery.com/ready/
$(document).ready(handler)$().ready(handler)(this is not recommended)$(handler)
$(document).ready(handler)$().ready(handler)（不推荐这样做）$(handler)
So using version 3, we have:
所以使用版本 3，我们有：
$(function() {
$('#emoticons a').click(function(){
var smiley = $(this).attr('title');
$('#description').val($('#description').val()+" "+smiley+" ");
});
});
回答by MaJac89
try also this...
也试试这个...
$('#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);
});
Fix after your comment:
在您的评论后修复：
?
?
$('#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);
});?
?
?
