在 HTML 的文本框中输入和显示表情符号

【问题标题】：Enter and DIsplay Emojis in Text Box in HTML在 HTML 的文本框中输入和显示表情符号
【发布时间】：2018-07-10 20:37:51
【问题描述】：

如何让 HTML 页面中的文本框接受表情符号？基本上，我想将表情符号显示为我的 WiFi 的 SSID。我尝试使用表情符号作为我的 Wifi 显示名称 (SSIS)，但它不接受。它是一个HUWAEI路由器，我使用192.168.1.1连接到它。之后我得到管理页面来更改然后广播的 SSID 名称。使用 Chrome 开发工具，我可以看到 CSS、HTML、JS 和 JQuery 脚本。不幸的是，我对 HTML、JS、JQuery 等知之甚少。有人可以帮忙吗？我正在使用 Chrome (v67.xx)。我找到了文本框编码的部分：

<td><input type="text" class="input_style Arabic_dialupNumber" id="ssid_wifiName" maxlength="32" /></td>

如果需要其他信息，请告诉我。提前致谢。

【问题讨论】：

Raj，没有任何有关您尝试过的研究和信息，我们无法帮助您。另外，看看this

标签： javascript html networking network-programming wifi

【解决方案1】：

我不确定您是否可以拥有带有表情符号图像的 TextField。我知道的一种方法是使用启用 contenteditable 的 div 并使用自定义 JS 脚本来解析用户输入。检查下面的 sn-p。

document.getElementById("emoji").addEventListener('keyup', function(evt) {
  //wait for user to input semi colon
  if (evt.keyCode == 186) {
    var doc = evt.target;
    var txt = doc.innerText || doc.textContent
    doc.innerHTML = (txt).replace("&amp;", "&");
    // put the cursor to the end of the text
    var sel = window.getSelection()
    var range = document.createRange()
    range.setStart(doc, 1);
    range.collapse(true)
    sel.removeAllRanges();
    sel.addRange(range);
  }
});

.textarea {
  background: white;
  width: 200px;
  height: 20px;
  padding: 2px;
  border: 1px solid black;
  font-size: 16px;
}

<span>Type &amp;#9786; to get a &#9786; emoji</span>
<div id="emoji" class="textarea" contenteditable="true"></div>

【讨论】：