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.
Comments
Post a Comment