jQuery技术下实现input元素输入框宽度大小自动调整的两种方式

H5周

已于 2022-08-30 10:14:58 修改

阅读量2.7k

点赞数 1

分类专栏：前端HTML5技术及其外延技术文章标签： jquery javascript 前端 html

于 2022-08-30 10:12:54 首次发布

本文链接：https://blog.csdn.net/qq_31512493/article/details/126597932

版权

前端HTML5技术及其外延技术专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客探讨了使用jQuery来实现input元素输入框宽度根据内容自动调整的两种方法，包括获取输入框宽度的方式以及具体的调整策略。文章详细阐述了每个步骤，并提供了完整的案例代码。

摘要由CSDN通过智能技术生成

1、input输入框宽度的获取方式一

由于input输入框中text文本的实际宽度不能直接获取，所以只能间接实现输入框宽度的自动调整（顺便说一句：input输入框的默认宽度和font-size、font-family有关）。具体思路是：先获取input的文本内容，然后创建预格式化的文本pre标签元素，将获取的文本内容放到pre元素里，再获取pre元素的宽度，根据获取的pre元素的宽度，进而改变input输入框的宽度，具体脚本如下（使用jQuery技术）：

//获取文本宽度
let textWidth = function(text){
    text = text.replace(/\s/g, 's');// 半角空格转换为全角空格,或者替换为单个字母或者汉字都可以
    let preHTML = $('<pre>'+ text +'</pre>').css({display: 'none'});
    $('body').append(preHTML);
    let width = preHTML.width();
    preHTML.remove();
    return width;
};

２、input输入框宽度的获取方式二

经测试也可以使用元素label和元素p结合的方式，实现input宽度的获取，代码如下：

let textWidth2 = function(text){
    text2 = text.replace(/\s/g,'s');// 半角空格转换为全角空格，或者用个汉字代替空格
    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输入框的宽度

接下来就是根据输入文本的增加或减少来调整输入框的宽度。在响应输入每个字符后宽度自动调整的事件有keydown、keyup、keypress、input、compositionend、compositionstart等，经测试，input在中英文输入都能实现宽度调整，keydown、keyup在中文输入时，根据浏览器版本和不同浏览器会有不同的反应。最好是input和keydown结合使用来实现宽度自动调整。具体代码如下：

//input宽度自适应
$("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输入框宽度自动调整的另一种方式

input输入框的宽度也可以根据输入文本的字符串的长度乘以文本字体大小来实现自动调整，具体代码如下：

//input宽度自适应
$("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);

});

５、完整案例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>input输入框宽度自动调整</title> 
    <script type="text/javascript" charset="utf-8">
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/15+"px";
window.onresize = function(){
        document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/15+"px";
    }
    </script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>

    <style>
    body
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#efe9e9;
}
div{
    width: 80%;
    height: 10rem;
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    background-color: #e6dd7b;
}
div>input{
    margin-top: 1rem;
    min-width: 4rem;
    display:inline-block;
    width: 4rem;
    height: 1rem;
    line-height: 1rem;
    font-size: .3rem;
    color: red;
    text-align: center;

}
div>input::-webkit-input-placeholder{
    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">
    // 获取浏览器默认字体
    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');// 半角空格转换为全角空格,或者替换为单个字母或者汉字都可以
    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');// 半角空格转换为全角空格，或者用个汉字代替空格
    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宽度自适应
$("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>