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

这篇具有很好参考价值的文章主要介绍了页面上input输入框宽度实现自动调整。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

3、通过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()));
});

4、input输入框宽度变动的另一种方式

  input输入框的宽度也可以根据输入文本的字符串的长度乘以文本字体大小来实现自动调整,具体代码如下:文章来源地址https://www.toymoban.com/news/detail-625128.html

//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);

});

5、完整案例代码如下

    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>

到了这里,关于页面上input输入框宽度实现自动调整的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包