Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to know Placeholder String width in px by Jquery/Javascript?

Here is the html

<body style="background-color:#999;font-size:12px;">
    <div style="width:500px; height:500px; margin:30px auto; background-color:#9CC">
    <input id="Test" type='text' placeholder='Hello how are you' style="width:270px;" / >
    </div>
</body>

I want to know the text width only. Not the input width nor the number of character. Please help me with a proper suggestion.

like image 541
Subhajit Panja Avatar asked Jun 06 '14 11:06

Subhajit Panja


1 Answers

You could use following snippet:

var _$tmpSpan = $('<span/>').html($('#Test').attr('placeholder')).css({
    position: 'absolute',
    left: -9999,
    top: -9999
}).appendTo('body'),
    textWidth = _$tmpSpan.width();
_$tmpSpan.remove();
alert(textWidth);

--DEMO--

like image 185
A. Wolff Avatar answered Nov 14 '22 21:11

A. Wolff