我想更改占位符属性,尝试以这种方式使用 attr()
:
$(this).attr("placeholder", " Mandatory field");
但结果不是 Font-Awesome 图标,它看起来像这样:
" Mandatory field"
不过,如果我把
<input type="text" class="mandatory_field form-control" id="affiliation" placeholder=" Mandatory field"/>
使用 CSS
.mandatory_field {
font-family: FontAwesome,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
它有效,但我需要知道如何使用 jQuery 动态获取这些结果。
提前致谢。
最佳答案
这个解决方案只需要:
- 一行jQuery
- CSS 属性
font-family:FontAwesome
- 完全没有 HTML
您需要以 \u
为前缀的图标的特定 CSS 代码。 Font-Awesome 仅记录类和 unicode。还好这个site有你需要的。在 jQuery 中应该是这样的:
$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');
CSS 和 JavaScript 字体实体之间的唯一区别是 JavaScript 的第二个字符位置的 u
。
在演示中,我还使用 ::placeholder
添加了一些样式伪元素作为奖励。您可以在不影响用户输入样式的情况下设置占位符的样式。
演示
$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');
/* With the exception of font-family:FontAwesome everything
|| is optional.
*/
input {
font: inherit
}
.mandatory_field::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
.mandatory_field::-moz-placeholder {
/* Firefox 19+ */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
.mandatory_field:-ms-input-placeholder {
/* IE 10+ */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css">
<input type="text" class="mandatory_field form-control" id="affiliation">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
关于javascript - 如何使用 jQuery 更改 Font-Awesome 内容的占位符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44183808/