使用 jquery 添加类后，字体真棒图标字体作为输入中的占位符答案

【问题标题】：Font awesome icon font as a placeholder in input after adding class with jquery使用 jquery 添加类后，字体真棒图标字体作为输入中的占位符
【发布时间】：2016-04-22 22:12:22
【问题描述】：

我正在尝试在搜索输入字段中使用字体真棒图标作为占位符。

Jsfiddle examples

我使用相应的 html 实体作为占位符，然后使用伪类来设置具有正确字体系列的占位符（jsfiddle 中的示例 2）：

HTML：

<div class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</div>

CSS：

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon {
    padding:5px;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}
input.icon::-moz-placeholder {
    font-family:'FontAwesome';
}
input.icon::-ms-input-placeholder {
    font-family:'FontAwesome';
}

它按预期工作。

当我尝试通过 jquery 添加输入类和占位符时问题就开始了（jsfiddle 中的示例 1）：

JS：

$(document).ready(function() {
$('.wrapper input:first').addClass('icon');
$('.wrapper input:first').attr("placeholder", "&#61442;");
});

它不会将 font-family 应用于输入占位符，而是显示实体文本。

我试着混在一起，最后放弃了。请帮忙！

Jsfiddle examples

附：在 css 中添加 :before 和字体 content 到输入包装器的溃败不适用于我的特殊情况。

【问题讨论】：

@PhiterFernandes 之前尝试过，然后又尝试了一次 - 它对我不起作用。万一我做错了，如果您可以通过正确更改顺序来更新 jsfiddle 以解决问题，我将不胜感激！

标签： jquery css input font-awesome placeholder

【解决方案1】：

您应该首先解析哈希。你可以使用$.parseHTML:

$('.wrapper input:first').attr("placeholder", $.parseHTML("&#61442;")[0].data);

【讨论】：

【解决方案2】：

你可以试试这样的：

$('.wrapper input:first').attr("placeholder", $('<textarea />').html("&#61442;").html());

JSFiddle

这是通过将值作为 HTML 而不是文本传递来实现的，这可以通过创建对实际上并不存在的元素的引用来实现。

【讨论】：