添加 class 和 jquery 后,Font awesome 图标字体作为输入中的占位符
Font awesome icon font as a placeholder in input after adding class with jquery
我正在尝试使用超棒的字体图标作为搜索输入字段中的占位符。
我使用相应的 html 实体作为占位符,然后使用伪 class 为占位符设置正确字体系列的样式(jsfiddle 中的示例 2):
HTML:
<div class="wrapper">
<input class="icon" type="text" placeholder="" />
</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 添加输入 class 和占位符时出现问题(jsfiddle 中的示例 1):
JS:
$(document).ready(function() {
$('.wrapper input:first').addClass('icon');
$('.wrapper input:first').attr("placeholder", "");
});
它不会将字体系列应用到输入占位符,而是只显示实体文本。
我试着把事情混在一起,最后放弃了。请帮忙!
P.S.:
在 css 中添加带有字体 content
的 :before
到输入包装器的方法不适用于我的特定情况。
您可以尝试这样的操作:
$('.wrapper input:first').attr("placeholder", $('<textarea />').html("").html());
这通过将值作为 HTML 而不是文本传递来实现,这可以通过创建对实际上并不存在的元素的引用来实现。
您应该先解析散列。您可以使用 $.parseHTML
:
$('.wrapper input:first').attr("placeholder", $.parseHTML("")[0].data);
我正在尝试使用超棒的字体图标作为搜索输入字段中的占位符。
我使用相应的 html 实体作为占位符,然后使用伪 class 为占位符设置正确字体系列的样式(jsfiddle 中的示例 2):
HTML:
<div class="wrapper">
<input class="icon" type="text" placeholder="" />
</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 添加输入 class 和占位符时出现问题(jsfiddle 中的示例 1):
JS:
$(document).ready(function() {
$('.wrapper input:first').addClass('icon');
$('.wrapper input:first').attr("placeholder", "");
});
它不会将字体系列应用到输入占位符,而是只显示实体文本。
我试着把事情混在一起,最后放弃了。请帮忙!
P.S.:
在 css 中添加带有字体 content
的 :before
到输入包装器的方法不适用于我的特定情况。
您可以尝试这样的操作:
$('.wrapper input:first').attr("placeholder", $('<textarea />').html("").html());
这通过将值作为 HTML 而不是文本传递来实现,这可以通过创建对实际上并不存在的元素的引用来实现。
您应该先解析散列。您可以使用 $.parseHTML
:
$('.wrapper input:first').attr("placeholder", $.parseHTML("")[0].data);