javascript - How to change placeholder with Font-Awesome content using jQuery? - Stack Overflow

admin管理员组

文章数量:1336380

I want to change the placeholder attribute trying attr() using it this way:

$(this).attr("placeholder", " Mandatory field");

But the result is not the Font-Awesome icon , it literally looks looks like this:

" Mandatory field"

Nevertheless, if I put

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

with CSS

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

It works, but I need to know how to get those results dynamically with jQuery.

Thanks in advance.

I want to change the placeholder attribute trying attr() using it this way:

$(this).attr("placeholder", " Mandatory field");

But the result is not the Font-Awesome icon , it literally looks looks like this:

" Mandatory field"

Nevertheless, if I put

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

with CSS

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

It works, but I need to know how to get those results dynamically with jQuery.

Thanks in advance.

• javascript
• jquery
• css
• font-awesome

Share Improve this question Follow edited May 26, 2017 at 12:16 zer00ne 44.1k66 gold badges4545 silver badges7777 bronze badges asked May 25, 2017 at 15:05 bLuEdDybLuEdDy 19311 gold badge11 silver badge77 bronze badges 2

• 1 jQuery probably transforming the string to make it safe, try without jQuery $(this)[0].setAttribute('placeholder', ' Mandatory field') and see if it works. – GillesC Commented May 25, 2017 at 15:10
• Thanks GillesC, but I obtained: Uncaught TypeError: [0].setAttribute is not a function – bLuEdDy Commented May 25, 2017 at 15:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

This solution needs only:

• one line of jQuery
• CSS property font-family:FontAwesome
• No HTML at all

You'll need the specific CSS code for the icon prefixed with a \u. Font-Awesome documents only class and unicode. Fortunately, this site has what you need. Here's what it should be in jQuery:

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

The only difference between CSS and JavaScript font entities is the u in the second character position for JavaScript.

In the demo, I also added some styles with the ::placeholder pseudo element as a bonus. You can style your placeholders without affecting the user input style.

Demo

$('.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/fontawesome/4.7.0/css/font-awesome.min.css">

<input type="text" class="mandatory_field form-control" id="affiliation">

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use a data attribute to store the awesome font symbol you want and use it bined with the text $input.data('placeholder') + ' Mandatory field'.

Code example:

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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

本文标签： javascriptHow to change placeholder with FontAwesome content using jQueryStack Overflow