怎么让input标签的宽度随着里面的内容变化？

Question

input里面的数据是在js里面赋值的，但是总显示不全，怎么在能根据内容变化宽度呀

 <style>
*{
    margin:0px;
    padding:0px;
    font-size:20;
}
select{
    height:22px;
    width:128px;
}
button{
    width:120px;
    margin-right:3px;
}
input[disabled]{
    border: 0px solid red;
    background-color:#fff;
}
textarea{
    border: 0px solid red;
    background-color:#fff;
    overflow-y:hidden;
    overflow-x:hidden;
}
</style>

<input id="bmmc" type="text" disabled="true"></input>

Answer 1

用一个absolute定位的div，内置一个label（font-size和font-family要和input一样）来计算文字的实际宽度，计算好后再重新设置input的width属性

 <style>
    * {
        margin: 0px;
        padding: 0px;
        font-size: 20;
    }

    select {
        height: 22px;
        width: 128px;
    }

    button {
        width: 120px;
        margin-right: 3px;
    }

    input[disabled] {
        border: 0px solid red;
        background-color: #fff;font-size:14px;font-family:宋体;
    }
    /*调整left属性值键div不可见*/
    #dv{position:absolute;left:-9999999px;top:0;width:9999px;}
    #dv label{font-size:14px;font-family:宋体;}
    textarea {
        border: 0px solid red;
        background-color: #fff;
        overflow-y: hidden;
        overflow-x: hidden;
    }
</style>
<div id="dv"><label></label></div>
<input id="bmmc" type="text" disabled="true"></input>
<script>
    var s = 'abcdefg中干发啦发啦两分钟就分了就发了发放3333333333333333'
    var dv = document.getElementById('dv');
    dv.firstChild.innerHTML = s;
    document.getElementById('bmmc').value = s;
    document.getElementById('bmmc').style.width=dv.firstChild.offsetWidth+'px'
</script>