javascript - Unable to display width of text -


i can't seem display width of text using jquery user fills in input box. followed jquery documentation. maybe missed can't seem see :(

as text displayed keyup event, width should displayed text changes, right? further info, have been trying rebuild app this: text changing application

here jsfiddle

<!--form begin--> <form id="textchanger" onsubmit="return submitform();">     <p>preview:</p>     <!--display user input--> <span id="text-preview"><p id="prev" class="form_result"></p></span>      <p id="textcount"></p>     <!--display width-->     <p id="textwidth"></p>     <label class="sign-text">enter text         <input type="text" name="text" id="text" class="form-control enter-text-field validation-passed" value="enter text">     </label> </form> 

js:

$(document).ready(function () {      $('#text').keyup(function (e, w) {         $("#prev").html($(this).val());          var txtwidth = $("#text-preview").width();         $("#textwidth").text("approx. width: " + txtwidth + " px.");     }).keypress(function (e) {         return /[a-z0-9.-\s]/i.test(string.fromcharcode(e.which));     }); }); 

set css display: inline-block; on $("#text-preview").

the span filling entire width never report right size. use browser developer tools inspect width.

http://jsfiddle.net/xxl0lpb1/2/


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -