How to get the text input content width using javaScript or jquery

Question

I have an <input type="text" /> tag.

There may be too much content in it, and when the content length goes exceed the input width, it will be scrolling horizontally.

In fact, I want to control the width of tag, to make it varying according to the content.

So, is there any way to get the content width of the tag? Similar to the scrollHeight attribute?

Answer 1

check this out

http://jsfiddle.net/philfreo/MqM76/

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

Calculating text width

Answer 2

You can use $("#chkText").on('input', function (){}); as below

JSFiddle Here

<script type="text/javascript">
    $(document).ready(function () {
        $("#chkText").on('input', function () {
            var lng = $("#chkText").val().length;
            $("#chkText").width(lng * 10);
        });
    });
</script>

HTML

<input type="text" id="chkText"/>

Answer 3

Try to adjust the length onkeypess or onkeyup:

A onkeypress example. onkeypress="this.style.width = ((this.value.length + 1) * 5) + 'px';"

This should work if you put it inside the input tag. I think it would be good to define a minimum/maximum width.