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

我正在尝试使用font-awesome图标作为搜索输入字段中的占位符。

Jsfiddle的例子

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

HTML：

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", ""); }); 

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

我试图混合各种东西，最后放弃。 请帮忙！

Jsfiddle的例子

PS：添加的路由:before使用字体content :before输入css中的包装器对我的特定情况不起作用。

Answer 1

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

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

Answer 2

你可以尝试这样的事情：

 $('.wrapper input:first').attr("placeholder", $('').html("").html()); 

的jsfiddle

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