?? input輸入框?qū)挾葘?shí)現(xiàn)自動(dòng)調(diào)整，本文介紹兩種方式，一是通過獲取input內(nèi)容的寬度實(shí)現(xiàn)輸入框?qū)挾鹊淖詣?dòng)調(diào)整；二是通過內(nèi)容字符串的長(zhǎng)度乘以文本字體大小的積，來實(shí)現(xiàn)輸入框?qū)挾鹊淖詣?dòng)調(diào)整。
1、input輸入框?qū)挾鹊墨@取方式一
?? 由于input輸入框中text文本的實(shí)際寬度不能直接獲取，所以只能間接實(shí)現(xiàn)輸入框?qū)挾鹊淖詣?dòng)調(diào)整（順便說一句：input輸入框的默認(rèn)寬度和font-size、font-family有關(guān)）。具體思路是：先獲取input的文本內(nèi)容，然后創(chuàng)建預(yù)格式化的文本pre標(biāo)簽元素，將獲取的文本內(nèi)容放到pre元素里，再獲取pre元素的寬度，根據(jù)獲取的pre元素的寬度，進(jìn)而改變input輸入框的寬度，具體腳本如下（使用jQuery技術(shù)）：
//獲取文本寬度
let textWidth = function(text){
text = text.replace(/\s/g, 's');// 半角空格轉(zhuǎn)換為全角空格,或者替換為單個(gè)字母或者漢字都可以
let preHTML = $('<pre>'+ text +'</pre>').css({display: 'none'});
$('body').append(preHTML);
let width = preHTML.width();
preHTML.remove();
return width;
};
２、input輸入框?qū)挾鹊墨@取方式二
?? 經(jīng)測(cè)試也可以使用元素label和元素p結(jié)合的方式，實(shí)現(xiàn)input寬度的獲取，代碼如下：
let textWidth2 = function(text){
text2 = text.replace(/\s/g,'s');// 半角空格轉(zhuǎn)換為全角空格，或者用個(gè)漢字代替空格
console.log('text2length:',text2.length);
let pHTML = '<label for="" id="labels" style="display:inline-block;width:auto;box-sizing: content-box;"><p style="text-align:center;box-sizing: content-box;">'+ text2 +'</p></label>';
$('body').append(pHTML);
let width = $('#labels').width();
$('#labels').remove();
console.log('text-width',width)
return width;
};
３、通過js事件實(shí)現(xiàn)輸入框?qū)挾茸儎?dòng)
??接下來就是根據(jù)輸入文本的增加或減少來調(diào)整輸入框的寬度。在響應(yīng)輸入每個(gè)字符后寬度自動(dòng)調(diào)整的事件有keydown、keyup、keypress、input、compositionend、compositionstart等，經(jīng)測(cè)試，input在中英文輸入都能實(shí)現(xiàn)寬度調(diào)整，keydown、keyup在中文輸入時(shí)，根據(jù)瀏覽器版本和不同瀏覽器會(huì)有不同的反應(yīng)。最好是input和keydown結(jié)合使用來實(shí)現(xiàn)寬度自動(dòng)調(diào)整。具體代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-625128.html
//input寬度自適應(yīng)
$("input").keydown( function(e){
e.stopPropagation();
$(this).width(textWidth2($(this).val()));
console.log('keydown-width',$(this).width());
});
document.getElementById('aa').addEventListener('input', function(){
console.log('input-width:',$('#aa').width());
$('#aa').width(textWidth2($('#aa').val()));
});
４、input輸入框?qū)挾茸儎?dòng)的另一種方式
??input輸入框的寬度也可以根據(jù)輸入文本的字符串的長(zhǎng)度乘以文本字體大小來實(shí)現(xiàn)自動(dòng)調(diào)整，具體代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-625128.html
//input寬度自適應(yīng)
$("input").keydown( function(e){
e.stopPropagation();
$(this).width($(this).val().length*10);
let widthP = $(this).val().length*getFontFamily(document.documentElement)*15/document.documentElement.clientWidth + 'rem';
$(this).css('width',widthP);
});
５、完整案例代碼如下
font-size:.3rem;
color:red;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="width auto change" id="aa">
</div>
<script type="text/javascript" charset="utf-8">
// 獲取瀏覽器默認(rèn)字體
function getFontFamily(elem) {
var computedStyles = 'getComputedStyle' in window? window.getComputedStyle(elem):elem.currentStyle;
// console.log('currentStyle',computedStyles);
console.log('font-family',computedStyles['font-family']);
console.log('font-size',computedStyles['font-size']);
return computedStyles['font-size'].substring(0,computedStyles['font-size'].length-2);
}
//獲取文本寬度
let textWidth = function(text){
text = text.replace(/\s/g, 's');// 半角空格轉(zhuǎn)換為全角空格,或者替換為單個(gè)字母或者漢字都可以
let preHTML = $('<pre>'+ text +'</pre>').css({display: 'none'});
$('body').append(preHTML);
let width = preHTML.width();
preHTML.remove();
return width;
};
getFontFamily(document.documentElement);
let textWidth2 = function(text){
text2 = text.replace(/\s/g,'s');// 半角空格轉(zhuǎn)換為全角空格，或者用個(gè)漢字代替空格
console.log('text2length:',text2.length);
let pHTML = '<label for="" id="labels" style="display:inline-block;width:auto;box-sizing: content-box;"><p style="text-align:center;box-sizing: content-box;">'+ text2 +'</p></label>';
$('body').append(pHTML);
let width = $('#labels').width();
$('#labels').remove();
console.log('text-width',width)
return width;
};
//input寬度自適應(yīng)
$("input").keydown( function(e){
e.stopPropagation();
// $(this).width($(this).val().length*10);
// let widthP = $(this).val().length*getFontFamily(document.documentElement)*15/document.documentElement.clientWidth + 'rem';
// $(this).css('width',widthP);
$(this).width(textWidth2($(this).val()));
console.log('keydown-width',$(this).width());
});
document.getElementById('aa').addEventListener('compositionstart', function(){
console.log(this.value);
})
document.getElementById('aa').addEventListener('compositionend', function(){
console.log('compositionend:',$('#aa').val());
//$('#aa').width(textWidth2($('#aa').val()));
})
document.getElementById('aa').addEventListener('input', function(){
console.log('input-width:',$('#aa').width());
// $('#aa').width(textWidth2($('#aa').val()));
});
</script>
</body>
</html>
到了這里，關(guān)于頁(yè)面上input輸入框?qū)挾葘?shí)現(xiàn)自動(dòng)調(diào)整的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
