Reputation: 22941
I'd like to add an ellipsis to an input element's placeholder attribute with jQuery prop()
but instead of the intended …
I get literal string …
.
How can I add html entities by name with jQuery prop()
?
$(document).ready(function(){
$('div#b input').prop('placeholder','Search…');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="a"><input type="text" placeholder="Search…" /></div><br />
<div id="b"><input type="text" /></div>
Upvotes: 3
Views: 993
Reputation: 21487
Just type a horizontal ellipsis:
$(document).ready(function(){
$('div#b input').prop('placeholder',$(document.createElement('div')).html('Search…').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="a"><input type="text" placeholder="Search…" /></div><br />
<div id="b"><input type="text" /></div>
Upvotes: -1
Reputation: 816364
You have to invoke the HTML parser one way or the other. You could create a new element, set its HTML content and get its content as text:
$('div#b input').prop(
'placeholder',
$('<div />').html('Search…').text()
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="b">
<input />
</div>
Upvotes: 1
Reputation: 36592
The simplest solution is to use the raw hex code instead of the named entity, as these are handled just fine by JS and the DOM API.
$(document).ready(function(){
$('div#b input').prop('placeholder','Search\u2026'); // <- \u2026 is …
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="a"><input type="text" placeholder="Search…" /></div><br />
<div id="b"><input type="text" /></div>
Upvotes: 3