输入文本上的表情符号答案

【问题标题】：Emojis on input text输入文本上的表情符号
【发布时间】：2015-08-24 16:54:25
【问题描述】：

我正在尝试用表情符号替换密码字段中的项目符号字符。

所需的 Unicode 输出 http://apps.timwhitlock.info/emoji/tables/unicode

任何关于从哪里开始寻求实现这一目标的想法都会有所帮助

【问题讨论】：

change password char in HTML的可能重复
您可以使用掩码文本字段输入到 angularjs 或 ember 之类的库中（以在键入时获取文本），并且对于每个字符而不是输出文本，您输出图像。您必须真正完善流程，但这是朝着正确方向迈出的一步。
感谢@Mari，尽管该帖子仍然没有回答“这无法完成”的问题

标签： javascript unicode passwords

【解决方案1】：

我想出了如何在 Webkit 浏览器中更改项目符号图标。

基本上，您使用的是自定义字体 (demo)。

转到 Fontello 或同等网站。
选择或上传一个图标。
选择“自定义代码”选项卡。
将字形目标更改为 U+"2022" 以替换项目符号。
下载网页字体。

在您的网站上包含字体文件，并包含以下 css（注意，0000 将根据字形和字形目标而变化）

/* Use the css below to change the password input symbol */
@font-face {
  font-family: 'fontello';
  src: url('./font/fontello.eot?0000');
  src: url('./font/fontello.eot?0000#iefix') format('embedded-opentype'),
  url('./font/fontello.woff?0000') format('woff'),
  url('./font/fontello.ttf?0000') format('truetype'),
  url('./font/fontello.svg?0000#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

input[type="password"] {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

  /* add spacing to better separate each image */
  letter-spacing: 2px;
}

full instructions with screenshots are here。

【讨论】：

如果安全不是主要问题（我认为在这种特定情况下不是），您可以制作一个完全由笑脸组成的字体并使用文本字段 - 这应该可以交叉使用浏览器。

【解决方案2】：

据我所知，这不是一个好主意。由于浏览器会原生呈现这些内容，因此如果您构建 JavaScript 解决方法，您可能会危及安全性、破坏自动完成等。

从这里找到：change password char in HTML。

虽然这与您想要做的不同，但这里有人在密码输入字段上做一些基本的 CSS 样式。抱歉，它没有你想要做的那么棒：Styling Password Fields in CSS。

【讨论】：