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>
用一个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>
你可以给input,一个onchange事件,每次更改input的值,触发onchange的方法,方法中,根据值的长度来修改input框的宽度
通过JS
在页面载入完成后
计算需要调整宽度的标签内容宽度并赋值
不知道浮动是否可以满足,float属性修饰的组件具有包裹性,也就是自适应能力。