使用jQuery添加类后，将字体真棒图标字体用作输入中的占位符 [英] Font awesome icon font as a placeholder in input after adding class with jquery

问题描述

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

I am trying to use font-awesome icons as a placeholder in search input field.

Jsfiddle示例

我使用相应的html实体作为占位符，然后使用伪类为占位符设置具有正确的字体系列的样式(jsfiddle中的示例2):

I use corresponding html entity as a placeholder, then use pseudo class to style placeholder with correct font-family (example 2 in jsfiddle):

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开始)，问题开始了:

The problem starts when I try to add input class and placeholder via jquery (example 1 in jsfiddle):

JS:

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

它不将字体家族应用于输入占位符，而仅显示实体文本.

It doesn't apply font-family to input placeholder and just shows entity text instead.

我试图把事情混在一起，最后放弃了.请帮忙！

I tried to mix things around and finally giving up. Please help!

Jsfiddle示例

P.S .: 在我的特定情况下，在字体中添加:before和字体content到css输入包装器的行列是行不通的.

P.S.: The rout of adding :before with font content to input wrapper in css will not work for my particular case.

推荐答案

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

You should parse the hash first. You can use $.parseHTML:

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

这篇关于使用jQuery添加类后，将字体真棒图标字体用作输入中的占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！