Question

我想以这种方式更改尝试attr()的占位符属性：

$(this).attr("placeholder", "&#xf0a4; Mandatory field");

但结果不是Font-Awesome图标，它看起来像这样：

"&#xf0a4; Mandatory field"

然而，如果我把

<input type="text" class="mandatory_field form-control" id="affiliation" placeholder="&#xf0a4; Mandatory field"/>

使用CSS

.mandatory_field {  
   font-family: FontAwesome,"Helvetica Neue",Helvetica,Arial,sans-serif; 
}

它有效，但我需要知道如何使用jQuery动态获取这些结果。

提前致谢。

Answer 1

此解决方案仅需：

一行jQuery
CSS属性font-family:FontAwesome
根本没有HTML

您需要具有前缀为\u的图标的特定CSS代码。 Font-Awesome文档只有class和unicode。幸运的是，site符合您的需求。这是jQuery应该是什么：

$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');

CSS和JavaScript字体实体之间的唯一区别是JavaScript的第二个字符位置中的u。

在演示中，我还添加了一些带有::placeholder伪元素的样式作为奖励。您可以在不影响用户输入样式的情况下设置占位符的样式。

演示

＆＃13;

$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');

＆＃13;

/* 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;
}

.mandatory_field:-moz-placeholder {
  /* Firefox 18- */
  color: red;
  font-family: FontAwesome;
  font-variant: small-caps;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用data属性存储您想要的真棒字体符号，并将其与文本$input.data('placeholder') + ' Mandatory field'结合使用。

代码示例：

var $input = $('#affiliation'),
    placeholder =  $input.data('placeholder') + ' Mandatory field';
    
$input.attr('placeholder', placeholder);

.mandatory_field {  
  font-family: FontAwesome,"Helvetica Neue",Helvetica,Arial,sans-serif; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" data-placeholder="&#xf0a4;" class="mandatory_field form-control" id="affiliation">

如何使用jQuery更改含有Font-Awesome内容的占位符？

2 个答案:

此解决方案仅需：

演示