点击插入emoji到textarea的JavaScript脚本不生效，求问题排查

存在的问题 #

• 表单内的 <button> 默认类型为 submit，点击后会触发表单提交、页面刷新，插入操作的效果直接被刷新覆盖。
• 调用 insertAtCursor 时未绑定执行上下文，函数内部的 this 指向全局 window 对象，无法获取点击按钮的 value 属性，插入内容不符合预期。
• 非必现兼容问题：<script> 标签的 type 属性值末尾存在多余空格，旧版本浏览器可能无法正常识别脚本类型。

修复方法 #

方案1：调整调用逻辑，传参实现功能 #

1. 为所有按钮添加 type="button" 属性，明确为普通按钮，阻止默认表单提交行为。
2. 调用插入函数时直接将按钮的emoji值作为参数传入，避免this指向问题。
3. 清理script标签的多余空格。

修复后完整代码：

<form>
    <button type="button" value="😀">😀</button>
    <button type="button" value="😂">😂</button>
    <button type="button" value="👍">👍</button>
    <br>
    <textarea id="text1" cols="40" rows="3" placeholder="This is some dummy text."></textarea>
</form>

<script type="text/javascript">
    let currentInput = document.getElementById('text1');

    function insertAtCursor(emoji) {
        let cursorPos = currentInput.selectionStart;
        let v = currentInput.value;
        let textBefore = v.substring(0, cursorPos);
        let textAfter = v.substring(cursorPos, v.length);
        currentInput.value = textBefore + emoji + textAfter;

        cursorPos += emoji.length;
        currentInput.focus();
        currentInput.setSelectionRange(cursorPos, cursorPos);
    };

    if (document.querySelector('button')) {
        document.querySelectorAll('button').forEach((elem) => {
            elem.addEventListener("click", function() {
                insertAtCursor(this.value);
            });
        });
    }
</script>

方案2：绑定函数this指向，不修改原函数参数 #

如果不想改动原有 insertAtCursor 函数的参数定义，也可以通过 call 方法绑定执行上下文，仅修改事件监听部分代码即可：

elem.addEventListener("click", function() {
    insertAtCursor.call(this);
});

内容的提问来源于stack exchange，提问作者Jimmy Xee