如何在HTML文本框中输入和显示表情符号?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (283)

如何让HTML页面中的文本框接受表情符号?基本上,我想把表情显示为我的WiFi的SSID。我尝试使用emojis作为我的Wifi显示名称(SSIS),但它不接受,它是华北路由器,我使用192.168.1.1连接到它。在此之后,我将得到管理页面来更改SSID名称,然后进行广播。使用Chromedev工具,我可以看到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>
提问于
用户回答回答于

我不确定你是否能有一个带有表情符号图像的TextField。我知道的一种方法是使用一个启用了内容可编辑的div,并有一个定制的JS脚本来解析用户输入。检查下面的片段:

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>

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动