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

Posted 2023-03-05

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

【英文标题】：Font awesome icon font as a placeholder in input after adding class with 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", "");
);

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

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

Jsfiddle examples

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

【问题讨论】：

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

【参考方案1】：

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

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

【参考方案2】：

你可以试试这样的：

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

JSFiddle

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