3

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&hellip;" /></div><br />
<div id="b"><input type="text" /></div>
Eaten by a Grue
  • 19,208
  • 10
  • 77
  • 99
  • Interesting. It does the same thing using the native setAttribute method. – ccnokes Jun 04 '15 at 02:20
  • 3
    The reason you get the HTML entity is that you are not working with HTML. You are working with the DOM API. Setting an attribute or prop won't invoke the HTML parser (expect of course for `innerHTML`). – Felix Kling Jun 04 '15 at 02:21
  • 1
    Duplicate? http://stackoverflow.com/q/5796718/218196 – Felix Kling Jun 04 '15 at 02:28
  • @FelixKling, I'll admit It's pretty similar but a bit more specific. Vote to close if you feel so inclined - but I think both the question and the answers here add value to SO. – Eaten by a Grue Jun 04 '15 at 02:40

3 Answers3

3

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 &hellip;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>
Mathletics
  • 33,673
  • 6
  • 49
  • 57
1

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&hellip;').text()
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="b">
  <input />
</div>

See HTML Entity Decode

Community
  • 1
  • 1
Felix Kling
  • 756,363
  • 169
  • 1,062
  • 1,111
  • Interesting approach... a bit much but actually does exactly what I asked more so than the accepted answer since it allows me to use html entities. Thanks. – Eaten by a Grue Jun 04 '15 at 02:41
  • Yeah, I wouldn't do that. Or at least I would have a helper function that only uses a single element for that, not creating one every time I need the conversion. But yeah, just literally answering the question ;) – Felix Kling Jun 04 '15 at 03:08
-1

Just type a horizontal ellipsis:

$(document).ready(function(){
 $('div#b input').prop('placeholder',$(document.createElement('div')).html('Search&hellip;').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&hellip;" /></div><br />
<div id="b"><input type="text" /></div>
Robert McKee
  • 20,938
  • 1
  • 41
  • 55
  • That doesn't really answer my question. I'd like know how to add html entities by name since there are many things that can't be typed... at least not easily. – Eaten by a Grue Jun 04 '15 at 02:20
  • 1
    Well, to answer your question, you can't directly, because HTML entities are part of HTML, and the DOM doesn't know anything about HTML encoding really. – Robert McKee Jun 04 '15 at 02:24
  • @billynoah Well, here you go. Force the browser to convert the HTML entity for you. I guess that's easier if you can't remember how to type or insert html entities. – Robert McKee Jun 04 '15 at 02:30
  • 1
    For the record, I did not downvote this. It just wasn't what I was looking for. There are plenty of symbols and things I need to render on screen that I could copy and paste but I'd rather keep my code to strictly ascii. – Eaten by a Grue Jun 04 '15 at 02:36
  • 2
    I did too, but… BTW, hold down the ALT key, and type 0133 on the numeric keypad. Magic. – Robert McKee Jun 04 '15 at 02:40
  • @humble.rumble For you, try holding down control and shift and type u2026 -- less magical, but still magic! – Robert McKee Jun 04 '15 at 02:52
  • Dang it Windows®, you've done something cool that OS X and *nix don't do... who'd have guessed? – Eaten by a Grue Jun 04 '15 at 02:53
  • @humble.rumble Apparently only works in some apps. One day linux apps will standardize on one standard. – Robert McKee Jun 04 '15 at 15:05