How to auto resize the input boxes in html without using onkeyup or onkeypress or with a value that is already inside the input box?

Question

I am having a problem with this code and i have no any idea how to decode or debug this with a value inside the textbox. Can you please help me?

Html code:

<input type="text" onkeyup="expand(this);" readonly="readonly" style="background:transparent; width:5em; border:0px; color:white; text-shadow:2px 2px black;" class="s_fn" name="s_fn" value="<?php echo $row['suspect_fname'];?>" />

Javascript code:

<script>
function expand(textbox) {
    if (!textbox.startW) { textbox.startW = textbox.offsetWidth; }

    var style = textbox.style;

    //Force complete recalculation of width
    //in case characters are deleted and not added:
    style.width = 0;

    //http://stackoverflow.com/a/9312727/1869660
    var desiredW = textbox.scrollWidth;
    //Optional padding to reduce "jerkyness" when typing:
    desiredW += textbox.offsetHeight;

    style.width = Math.max(desiredW, textbox.startW) + 'px';
    }

</script>

You need to use some event to call the function.. What are you battling to do? Do you need to see what value is set in the `value` attribute? — Nicholas Robinson, Aug 02 '16 at 12:06
Possible duplicate of [Auto-scaling input\[type=text\] to width of value?](http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value) — Mohd Abdul Mujib, Aug 02 '16 at 12:20

How to auto resize the input boxes in html without using onkeyup or onkeypress or with a value that is already inside the input box?

0 Answers0