gacaibai
2016-07-29 03:04
采纳率: 46.7%
浏览 14.4k
已采纳

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

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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 已采纳

    用一个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>
    
    已采纳该答案
    2 打赏 评论
  • Bug开发攻城狮 2016-07-29 03:37

    你可以给input,一个onchange事件,每次更改input的值,触发onchange的方法,方法中,根据值的长度来修改input框的宽度

    2 1 打赏 评论
  • WxAMD 2016-07-29 03:44

    通过JS
    在页面载入完成后
    计算需要调整宽度的标签内容宽度并赋值

    打赏 评论
  • little_newBee 2016-07-29 03:45

    不知道浮动是否可以满足,float属性修饰的组件具有包裹性,也就是自适应能力。

    打赏 评论

相关推荐 更多相似问题