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

【问题标题】：Use webfont icon as placeholder in input field dynamically动态使用 webfont 图标作为输入字段中的占位符
【发布时间】：2019-02-19 03:10:32
【问题描述】：

我正在尝试使用 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;");

【问题讨论】：

标签： javascript jquery placeholder webfonts

【解决方案1】：

你可以试试这个吗：

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

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

【讨论】：

乐于助人:)