表情符号在输入文本上

Question

我正在尝试用emojis替换密码字段中的项目符号字符.

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

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

Answer 1

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

基本上,您使用自定义字体(演示).

• 去Fontello或同等网站.
• 选择或上传图标.
• 选择"自定义代码"选项卡.
• 将字形目标更改为U +"2022"以替换项目符号.
• 下载webfont.

• 在您的网站上包含字体文件,并包含以下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;
  }
  

屏幕截图的完整说明在这里.

Answer 2

据我所知，这不是一个好主意。由于浏览器会本地渲染这些内容，因此如果您构建 JavaScript 解决方法，则可能会损害安全性、破坏自动完成功能等。

从这里找到：更改 HTML 中的密码字符。

尽管这与您想要做的不同，但这里有人正在密码输入字段上执行一些基本的 CSS 样式设置。抱歉，它不如您想要做的那么棒：Styling Password Fields in CSS。