input寬度隨內(nèi)容變化

今天收到一個需求，input的寬度隨著內(nèi)容的變化而變化，最重要的還有最大寬度的限制。

然后各種查資料個嘗試，做了三個小案例：

一、獲取文字?jǐn)?shù)量*文字寬度去計(jì)算

雖然說這個方法代碼量比較少，但是在不同的字體中還是有一定的誤差的，所以建議不要使用，但是分享的角度來講，我還是拿出來寫一寫。

<input type="text"/>
<script type="text/javascript">（www.gendan5.com）
$(function(){
$('input').on('keydowm keyup',function () {
var textLength = $(this).val().length,//獲取input的文字?jǐn)?shù)量
inputWidth = textLength*12;//12是字的寬度
$(this).width(inputWidth);
});
});
</script>
這個方法對于中文還是可以的，但是一般遇到中英文混合就不行了，所以如果是中英文混合的input我建議放棄。

二、利用scrollWidth來制作一個邊長的（變不了短）

這個是有缺陷的，因?yàn)槲覀儷@取的是scrollWidth指，所以他只能獲取最長的，而不能獲取文字不撐開的時候的長度。

咱們直接貼代碼把

<input type="text"/>
<script type="text/javascript">
$(function () {
$('input').on('keydowm keyup',function () {
var adad = $('input').get(0).scrollWidth;
console.log(adad);
$(this).width(adad);
})
})
</script>

三、文本比較法，這個方法雖然比較繁雜，但是無論誤差還是可行性都是最高的

咱們先來個布局：

<div class="box">
<input type="text" value="請假"/>
<div></div>
</div>
<style>
.box div{ float:left;}
.box input{ width:80px; text-align:center;}
</style>
再來jq：

<script type="text/javascript">
$(function(){
function inputWidth(){
$('.box div').html($('.box input').val());//把input的文字給div
var inwidth = $('.box div').width();//獲取div的寬度
if (80 < inwidth && inwidth < 800){
$('.box input').width(inwidth);//把div的寬度給input
};
};
inputWidth();
$('.box input').on('keydown keyup input',function(){//時時更新
inputWidth();
});
});
</script>
其實(shí)JQ和原生JS一樣的道理，如果你使用JQ的直接拿走就可以了，如果是原生的按照這個想法寫就可以了。