将图像拖动到文本区时，将图像替换值添加到鼠标的位置 [英] Add image alt value to position of mouse when image dragged to text-area
问题描述
我有一个用户可以在我的网站上填写的文本区域。以下是我想要做的一个例子：
当用户在此文本区域中评论其他人的帖子时，他们在顶部有一组表情图片供选择。我希望用户点击他们想要选择的表情符号（然后在其周围出现边框），然后用户可以在希望粘贴文本的文本区域中单击一次。该文本将来自图像的 alt 属性。这可以节省写表情符号字符代码时的用户时间。
我自己尝试了一些代码，但我不确定JavaScript。这是我的尝试......
我的CSS ...
img：hover {
border：1px solid blue
}
我的HTML ...
< a href =＃！>< img src =smiley1.pngalt ={smiley001}>< img src =smiley2.pngalt ={smiley002}>< img src =smiley3.pngalt ={smiley003}< img src =smiley4.pngalt ={smiley004}>< img src =smiley5.pngalt ={smiley005}>< / a>< br>
是否有JavaScript / jquery解决方案？
如果这是不可能的，有没有办法用文本而不是图像来处理， title 属性被复制到textarea？
看看这个小提琴。我从这个问题中找到了在鼠标位置插入功能。
其余部分很简单。添加一个点击事件来保存您点击的任何图片的 alt 属性以及另一个点击事件到 textarea ，这样替代代码被插入。只需点击图片，然后点击您想要 alt 代码出现的位置即可。
selected ='';
$ b $（'img'）。click（function（）{
console.log（$（this）.attr（'alt'））;
selected = $（这个）.attr（'alt'）;
}）;
$（'＃comments'）。click（function（）{
insertAtCaret（'comments'，selected）
//清除所选内容，使其不被重复复制
selected ='';
}）;
//从链接的答案复制
函数insertAtCaret（areaId，text）{
var txtarea = document.getElementById（areaId）;
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var b =（（txtarea.selectionStart || txtarea.selectionStart =='0'）？
ff：（document.selection？ie：false））;
if（br ==ie）{
txtarea.focus（）;
var range = document.selection.createRange（）;
range.moveStart（'character'，-txtarea.value.length）;
strPos = range.text.length;
}
else if（br ==ff）strPos = txtarea.selectionStart;
var front =（txtarea.value）.substring（0，strPos）;
var back =（txtarea.value）.substring（strPos，txtarea.value.length）;
txtarea.value =正面+文字+背面;
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;
}
I have a text area that users can fill out on my website. Here is an example of what I want to do:
When users comment on other people's posts in this text area, they have a collection of emoji pictures at the top to select. I want the users to click on an emoji they want to choose (and then a border appear around it), then the user can click once in the text area where they would like text pasted. This text will be from the image's alt attribute. This saves the user time when writing emoji character codes.
I have attempted some of the code myself, but I am not sure about the JavaScript. Here is my attempt...
My CSS...
img:hover {
border:1px solid blue
}
And my 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>
Is there a javascript/jquery solution to this?
If this is not possible, is there a way to do it with text instead of images, with the title attribute being copied to the textarea?
Check out this fiddle. I found an "insert at the mouse location" function from this question.
The rest is simple. Add a click event to save the alt attribute of whatever image the you clicked and another click event to the textarea so the alt code is inserted. It's just a matter of clicking the image and then clicking where you want the alt code to show up.
selected = '';
$('img').click(function(){
console.log($(this).attr('alt'));
selected = $(this).attr('alt');
});
$('#comments').click(function(){
insertAtCaret('comments',selected)
// Clear the selection so it isn't copied repeatedly
selected = '';
});
// Copied from the linked answer
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
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;
}
这篇关于将图像拖动到文本区时，将图像替换值添加到鼠标的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
