如何自动调节html宽度随字体改变

有些场景会让输入框随着文字的多少而改变

本次采用js动态获取input输入文字长度而改变输入框大小

html代码
 

<input type="text" class="shuru" placeholder="辅导员姓名" style="width:50px;" id="test"  oninput ="handleWidth()"/>

js代码
 

function handleWidth() {
        var dom = document.getElementById('daoyuan'),
        textLength = dom.value.length;

        //对字数及宽度做限制
        if(textLength>20){
            dom.style.width = '50%';
            return false;
        }
        dom.style.width = textLength*14 +2 + 'px';
    }