如何使用JavaScript为文本输入框动态插入Font Awesome图标效果

问题核心原因 #

原生<input type="text">仅支持纯文本内容，你往value属性中插入HTML标签只会原样显示字符串，无法渲染出Font Awesome图标效果。要实现富文本输入（同时展示文字+自定义图标），有两种实现方案可选：

方案1：替换为可编辑富文本框（完全保留Font Awesome图标样式，推荐） #

第一步：修改HTML输入框代码 #

把原有的input标签替换为支持富文本的contenteditable容器：

<!-- 替换原来的<input type="text" class="write-text" placeholder="Write message"> -->
<div contenteditable="true" class="write-text" data-placeholder="Write message"></div>

第二步：补充适配CSS #

给可编辑容器加和原生input一致的样式，同时实现placeholder效果：

.write-text {
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 8px 12px;
  min-width: 200px;
  outline: none;
  background: #fff;
}
.write-text:empty:before {
  content: attr(data-placeholder);
  color: #999;
}
.write-text i {
  margin: 0 2px;
  vertical-align: middle;
}

第三步：修改JS逻辑适配富文本框 #

1. 表情插入逻辑（支持光标位置插入，体验更贴近Messenger）

emojis.forEach((emoji)=>{
  emoji.addEventListener('click', ()=>{
    const cloneEmoji = emoji.cloneNode(true);
    insertNodeAtCursor(cloneEmoji);
    writeText.focus();
  })
})

// 光标位置插入元素工具函数
function insertNodeAtCursor(node) {
  const sel = window.getSelection();
  if (sel.getRangeAt && sel.rangeCount) {
    const range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(node);
    range.setStartAfter(node);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

2. 发送消息逻辑适配

修改sendMessage函数中取值、判空、清空的逻辑：

sendBtn.addEventListener('click', ()=>{
  // 替换原有的writeText.value判断
  if(writeText.innerText.trim() == ""){
    return
  } else{
    let today = new Date()
    const yourMessage = document.createElement('div')
    let yourTime = today.getMinutes() < 10 ? `${today.getHours()}:0${today.getMinutes()}` : `${today.getHours()}:${today.getMinutes()}`
    yourMessage.classList.add('your-message')
    // 替换原有的${writeText.value}为innerHTML
    yourMessage.innerHTML = `
    <p>${writeText.innerHTML}</p>
    <span>${yourTime}</span>
    `;
    chatSection.appendChild(yourMessage)
    // 替换原有的value清空为innerHTML清空
    writeText.innerHTML = ""
    // 后续好友回复逻辑保持不变即可
    ...
  }
})

方案2：使用原生Unicode表情（不用改输入框，适合轻量需求） #

如果不想改富文本框，可直接用系统自带的原生表情替代Font Awesome图标，原生input支持直接渲染emoji字符：

1. 给每个表情i标签加data-emoji属性存对应emoji：

<i class="fas fa-tired" data-emoji="😫"></i>
<i class="fas fa-surprise" data-emoji="😮"></i>
<!-- 其余表情依次添加对应emoji即可 -->

2. 修改表情点击逻辑：

emojis.forEach((emoji)=>{
  emoji.addEventListener('click', ()=>{
    writeText.value += emoji.dataset.emoji;
  })
})

该方案无需修改其余代码，缺点是表情样式为系统自带，无法统一为Font Awesome的风格。

内容的提问来源于stack exchange，提问作者Ali Sherifov