表情符号点击textarea [英] smilies to textarea on click

查看:132
本文介绍了表情符号点击textarea的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个小问题

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



这是我的 html 代码:

 < textarea id =descriptionname =description><<< ; / textarea的> 

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

strong> JS 代码:

  $('#emoticons a')。click(function(){$ b $($#
)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/ p>

感谢您的帮助



问候语

解决方案

另外,您可以使用以下功能:

 函数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上的代码,因此,查看新的例如,看此处


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 html code:

<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 JS code:

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

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/

Thanks for helping

Regards bernte

解决方案

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:

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.

这篇关于表情符号点击textarea的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆