通过ID在文本区域中插入文本/表情符号的JavaScript代码

Question

我试图呈现一个可能的表情符号列表，当用户点击它们时，特定标记，例如:P或:+，应该在他或她已经输入的文本之后或之间发布到文本区域中。但我做不好，请问我做错了什么？

文本区域:

<textarea id="SendMessageForm" cols=1 rows=1 oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' type="text" wrap="virtual" data-token="<?php echo $token; ?>" data-messageto="<?php echo $LoadMessageFromUser; ?>" class="form-control hass-message-input" placeholder="Type your message"></textarea>

表情符号示例和调用函数的样例

<img src="emoticons/clown.gif" alt="Emoticon" onClick="insertEmoticon(':+');" />
<img src="emoticons/puh2.gif" alt="Emoticon" onClick="insertEmoticon(':P');" />

使用Javascript实现此功能。

function insertEmoticon(smiley){ 
    var myField = document.getElementById(SendMessageForm); 
        if (document.selection) {
            myField.focus();
            var sel  = document.selection.createRange();
            if (sel.text == "") { 
                
                sel.text += smiley;
                myField.focus();
            } else { 
                
                sel.text = smiley;
            }
        } else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos    = myField.selectionStart;
            var endPos      = myField.selectionEnd;
            if (startPos == endPos) { 
                
            } else { 
                var str = myField.value.substring(startPos, endPos); 
            }
            var myVal   = smiley;
            myField.value = myField.value.substring(0, startPos)+ myVal + myField.value.substring(endPos, myField.value.length);
        } else {
            myField.value += smiley;
        }} 

欢迎任何帮助（对我的语言表示歉意）

- Martin4523

---

没有错误？将document.getElementById(SendMessageForm);更正为document.getElementById('SendMessageForm');使用引号。 - Itagaki Fumihiko

太简单了。感谢你的反应，很有效！你说要小心，是指对输入进行清洗等操作吗？ - Martin4523

抱歉，我理解错误了。你的意思是将引号放在“id”之间。感谢您的帮助 :) - Martin4523

Answer 1

你的代码问题在于你没有用引号将传递给 getElementById 的值括起来。

---

要解决这个问题，只需使用下面的代码。

document.getElementById("SendMessageForm");

区别在于这段代码中的SendMessageForm被引号包围，而你的代码没有。

如果你不用引号将值括起来，那么JavaScript会开始寻找名为SendMessageForm的变量，并使用该值。

通过用引号将其括起来，你表明你想要显式地搜索SendMessageForm。

---

总之，你需要将SendMessageForm用引号括起来表示它不是一个变量，而是一个string。

- Arnav Thorat