当用户点击下拉菜单时，我想显示表情符号。但问题是我知道如何做的唯一方法是逐个输入一个表情符号。
我的问题是我如何展示所有的表情符号？我希望当用户单击下拉菜单并单击表情符号时，将其添加到文本区域。
home.php：
<textarea id="textf2" rows="3" maxlength="3000" placeholder="Enter text" cols="35">
</textarea>
<button id="bt6" type="submit" name="search">Post status</button>
<div class="dropdown" id="div1">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
答案 0 :(得分：1)
好的，我认为这就是你想要的：
在查看here并修改代码一小时后，我得到了这个：
emojis = document.getElementById("myDropdown").getElementsByTagName("li")
for (var i = 0; i < emojis.length; i++) {
emojis[i].addEventListener("click", function() {
var smiley = this.innerHTML;
ins2pos(smiley, 'textf2');
});
}
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;
setCursor(TextArea, before.length + str.length);
}
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();
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown li')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}#myDropdown {
display: none
}
#myDropdown.show {
display: block;
}<textarea id="textf2" rows="3" maxlength="3000" placeholder="Enter text" cols="35">
</textarea>
<button id="bt6" type="submit" name="search">Post status</button>
<div class="dropdown" id="div1">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<ul id="myDropdown" class="dropdown-content">
<li>😁</li>
<li>😃</li>
<li>😅</li>
</ul>
</div>
希望有所帮助！
更新：要包含图片，您必须使用<div id="textf2" contentEditable="true"></div>而不是文字区域，并使用标记为here的代码
emojis = document.getElementById("myDropdown").getElementsByTagName("li")
for (var i = 0; i < emojis.length; i++) {
emojis[i].addEventListener("click", function() {
var smiley = this.innerHTML;
pasteHtmlAtCaret(smiley + " ");
});
}
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// only relatively recently standardized and is not supported in
// some browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown img')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}#myDropdown {
display: none
}
#myDropdown.show {
display: block;
}
#text_wrapper {
margin: 40px;
border: 1px solid #ccc;
}
#textf2 {
outline: none;
margin: 10px;
min-height: 100px;
}
img {
width: 50px;
height: auto;
}<div id="text_wrapper">
<div id="textf2" contentEditable="true">
</div>
</div>
<button id="bt6" type="submit" name="search">Post status</button>
<div class="dropdown" id="div1">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<ul id="myDropdown" class="dropdown-content">
<li><img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" /></li>
<li><img src="http://res.freestockphotos.biz/pictures/15/15550-illustration-of-a-yellow-smiley-face-pv.png" /></li>
<li><img src="http://res.freestockphotos.biz/pictures/15/15564-illustration-of-a-yellow-smiley-face-pv.png" /></li>
</ul>
</div>
答案 1 :(得分：0)
编辑：我误解了这个问题，所以我将添加如何做到这一点：
我会创建一个表情符号数组。然后我会遍历这个emojis数组。对于阵列中的每个表情符号，您要执行“地图”。操作，所以你得到一个HTML元素。然后，您希望将这些元素作为子项附加到dropdown-content元素。
例如：
var emojis = ['','','']; // put all emojis in here
emojis.map((character) => {
var a = document.createElement('a');
a.src='#';
a.textContent = character;
a.addEventListener(
'click',
function() { /* append character to the textarea. this will probably something simple like 'textareaElement.value += character */}
);
return a;
});
emojis.forEach((el) => dropDownContentElement.appendChild(el));