动态使用 webfont 图标作为输入字段中的占位符

Question

我正在尝试使用 MaterialDesignIcons webfont 作为占位符字体来动态设置输入字段占位符。

当用作 static 占位符时，它按预期工作，当文本字段为空时显示图标。

<input type="text" id="sampleInput" placeholder="&#xF6E3;" />

input#sampleInput::-webkit-input-placeholder {
    font-family: "Material Design Icons";
}

使用动态 jquery 方法给我带来了一些问题。似乎字符代码未正确转义为 html.

$('#sampleInput').prop('placeholder',"&#xF6E3;");

Answer 1

你能试试这个吗:

$('#sampleInput').prop('placeholder',"\uxF6E3");

你可以查看这个 jsfiddle 示例：http://jsfiddle.net/anaselalami/pty6ao7m/1/

动态使用 webfont 图标作为输入字段中的占位符

Use webfont icon as placeholder in input field dynamically

javascript

jquery

placeholder

webfonts