Question

我有一个文本区域，用户可以在我的网站上填写。这是我想要做的一个例子：

当用户在此文本区域中评论其他人的帖子时，他们会在顶部有一组表情符号图片进行选择。我希望用户点击他们想要选择的表情符号（然后在它周围出现一个边框），然后用户可以在他们想要粘贴文本的文本区域中单击一次。此文本将来自图像的alt属性。这样可以节省用户编写表情符号字符代码的时间我自己尝试了一些代码，但我不确定JavaScript。这是我的尝试......

我的CSS ......

img:hover { 
    border:1px solid blue
}

我的HTML ......

<a href="#!"><img src="smiley1.png" alt="{smiley001}"><img src="smiley2.png" alt="{smiley002}"><img src="smiley3.png" alt="{smiley003}"><img src="smiley4.png" alt="{smiley004}"><img src="smiley5.png" alt="{smiley005}"></a><br>
<textarea id="comments" cols="50" rows="10"></textarea>

这是否有javascript / jquery解决方案？

如果无法做到这一点，有没有办法用文本而不是图像来处理，title属性被复制到textarea？

Answer 1

查看此fiddle。我在鼠标位置找到了一个＆＃34;插入物＆＃34;函数来自question。

其余的很简单。添加点击事件以保存您点击的任何图片的In [1]: import vtk --------------------------------------------------------------------------- ImportError Traceback (most recent call last) /Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/vtk/vtkCommonCore.py in <module>() 4 # use relative import for installed modules ----> 5 from .vtkCommonCorePython import * 6 except ImportError: ImportError: dlopen(/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/vtk/vtkCommonCorePython.so, 2): Library not loaded: libvtkCommonCorePython35D-7.0.1.dylib Referenced from: /Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/vtk/vtkCommonCorePython.so Reason: image not found During handling of the above exception, another exception occurred: ImportError Traceback (most recent call last) <ipython-input-1-b7e11aadda62> in <module>() ----> 1 import vtk /Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/vtk/__init__.py in <module>() 39 40 # -------------------------------------- ---> 41 from .vtkCommonCore import * 42 from .vtkCommonMath import * 43 from .vtkCommonMisc import * /Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/vtk/vtkCommonCore.py in <module>() 7 # during build and testing, the modules will be elsewhere, 8 # e.g. in lib directory or Release/Debug config directories ----> 9 from vtkCommonCorePython import * ImportError: No module named 'vtkCommonCorePython'属性，并将另一个点击事件保存到alt，以便插入alt代码。只需点击图片，然后点击您希望textarea代码显示的位置即可。

alt

Answer 2

基本的javascript代码应该是这样的：

function write_tag() {
var text = this.getAttribute("alt");
getElementById("textarea").innerHTML += text;
}

在这种情况下，文本将添加到textarea内容的末尾。更复杂的代码应该检查光标的位置并尝试将文本插入到字符串的那一点。

触发该功能的侦听器可以添加到图像标签中：

<img src="smiley1.png" alt="{smiley001}" onclick="write_tag()">

以编程方式添加侦听器会更清晰，但它是另一个故事：您应该决定是否在页面中使用javascript或外部javascript，在这种情况下，您应该等待整个页面加载然后为所有图像添加侦听器。如果你使用jQuery，你可以写这样的东西，假设你把所有的emojis都放到了一个div中，并且使用了类＃34; emojis＆＃34;：

$(document).ready(function(){
    $(".emojis img").bind("click",write_tag);
}

Answer 3

  var front = (txtarea.value).substring(0,strPos);  
 var back = (txtarea.value).substring(strPos,txtarea.value.length); 
 txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    range.moveStart ('character', strPos);
    range.moveEnd ('character', 0);
    range.select();
}
else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
}

txtarea.scrollTop = scrollPos;

}

将图像alt值添加到图像拖动到文本区域时鼠标的位置

3 个答案: