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

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属性复制到文本区域？

Answer 1

看看这个小提琴 。 我从此问题中找到了“在鼠标位置插入”功能。

其余的很简单。 添加一个click事件以将您单击的任何图像的alt属性保存，并将另一个click事件保存到textarea以便插入alt代码。 只需单击图像，然后单击要显示alt代码的位置即可。

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

Answer 2

基本的javascript代码应类似于：

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

在这种情况下，将在文本区域内容的末尾添加文本。 更为复杂的代码应检查光标在哪里，并尝试将文本插入字符串的该点。

可以在image标签中添加触发该函数的侦听器：

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

以编程方式添加侦听器会比较干净，但这是另一回事：您应该决定是在页面中使用javascript还是在外部使用javascript，在这种情况下，您应该等待整个页面加载，然后为所有页面添加侦听器图片。 如果您使用jQuery，则可以编写类似以下内容的代码，假设您将所有表情符号都归入带有“表情符号”类的div中：

$(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;

}