自定义Emoji选择器无法向输入框插入表情问题求助

问题根源 #

1. 变量名错误：addEmoji函数里定义了inputEle，但赋值时误用了input.value，导致无法找到输入框元素。
2. 参数传递无效：img标签的innerHTML是空的，点击时传的是空值，根本没拿到表情字符。
3. 脚本重复定义：PHP循环里每次输出<script>标签，导致addEmoji和toggleEmojiDrawer函数被重复声明，引发代码冲突。

修复后的原生JS版本代码 #

<input class="form-control" name="message" placeholder="输入你的消息..." maxlength="150" id="shout" required>
<button type="button" onclick="toggleEmojiDrawer()" class="btn btn-primary btn-block mg-b-10">表情 </button>
</div>
<div class="body hidden" id="emojis">
<center>
<?php
$result = mysqli_query($con, "SELECT * FROM `emojis` ") or die(mysqli_error($con));
while($row = mysqli_fetch_assoc($result)) {
    // 直接传入数据库存储的表情字符
    echo "<img class='icon' onclick='addEmoji(\"".$row['Wut']."\")' src='".$row['url']."' alt='".$row['Wut']."' height='20' width='20' /> ";
}
?>
</center>
</div>

<script>
function addEmoji(icon) {
  let inputEle = document.getElementById('shout');
  // 支持光标位置插入表情，体验更好
  if (inputEle.selectionStart || inputEle.selectionStart === 0) {
    let startPos = inputEle.selectionStart;
    let endPos = inputEle.selectionEnd;
    inputEle.value = inputEle.value.substring(0, startPos) + icon + inputEle.value.substring(endPos);
    // 插入后光标自动移到表情后面
    inputEle.selectionStart = inputEle.selectionEnd = startPos + icon.length;
  } else {
    inputEle.value += icon;
  }
}
function toggleEmojiDrawer() {
  let drawer = document.getElementById('emojis');
  // 用toggle简化显示/隐藏逻辑
  drawer.classList.toggle('hidden');
}
</script>

如果你想用jQuery版本（更符合你的技术栈） #

<input class="form-control" name="message" placeholder="输入你的消息..." maxlength="150" id="shout" required>
<button type="button" class="btn btn-primary btn-block mg-b-10 emoji-toggle">表情 </button>
</div>
<div class="body hidden" id="emojis">
<center>
<?php
$result = mysqli_query($con, "SELECT * FROM `emojis` ") or die(mysqli_error($con));
while($row = mysqli_fetch_assoc($result)) {
    // 用data属性存储表情字符，更规范
    echo "<img class='icon' data-emoji='".$row['Wut']."' src='".$row['url']."' alt='".$row['Wut']."' height='20' width='20' /> ";
}
?>
</center>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  // 绑定表情抽屉切换事件
  $('.emoji-toggle').click(function() {
    $('#emojis').toggleClass('hidden');
  });

  // 绑定表情插入事件
  $('.icon').click(function() {
    let emoji = $(this).data('emoji');
    let input = $('#shout')[0];
    
    // 同样支持光标位置插入
    if (input.selectionStart || input.selectionStart === 0) {
      let startPos = input.selectionStart;
      let endPos = input.selectionEnd;
      input.value = input.value.substring(0, startPos) + emoji + input.value.substring(endPos);
      input.selectionStart = input.selectionEnd = startPos + emoji.length;
    } else {
      input.value += emoji;
    }
    input.focus();
  });
});
</script>

关键修复说明 #

• 把JS脚本移出PHP循环，避免函数重复定义。
• 直接传递数据库中的表情字符（$row['Wut']），确保拿到有效内容。
• 修正变量名错误，解决输入框找不到的问题。
• 新增光标位置插入逻辑，提升用户输入体验。
• jQuery版本采用事件绑定替代内联onclick，代码更清晰易维护。

内容的提问来源于stack exchange，提问作者0t9j