页面上input输入框宽度实现自动调整

最新推荐文章于 2024-03-01 15:16:24 发布

H5周

最新推荐文章于 2024-03-01 15:16:24 发布

阅读量7.9k

点赞数 1

文章标签： javascript 前端 html jquery html5

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

版权

input输入框宽度实现自动调整，本文介绍两种方式，一是通过获取input内容的宽度实现输入框宽度的自动调整；二是通过内容字符串的长度乘以文本字体大小的积，来实现输入框宽度的自动调整。

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;
};

３、通过js事件实现输入框宽度变动

接下来就是根据输入文本的增加或减少来调整输入框的宽度。在响应输入每个字符后宽度自动调整的事件有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);

});

５、完整案例代码如下

    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>

H5周

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面上input输入框宽度实现自动调整

input输入框宽度实现自动调整，本文介绍两种方式，一是通过获取input**内容的宽度**实现输入框宽度的自动调整；二是通过内容字符串的长度乘以文本字体大小的积，来实现输入框宽度的自动调整。
复制链接

扫一扫