input宽度随内容变化

浏览: 218次 日期:2018年08月08日 20:06:32 作者:青格勒

今天收到一个需求,input的宽度随着内容的变化而变化,最重要的还有最大宽度的限制。

 

然后各种查资料个尝试,做了三个小案例:

一、获取文字数量*文字宽度去计算

虽然说这个方法代码量比较少,但是在不同的字体中还是有一定的误差的,所以建议不要使用,但是分享的角度来讲,我还是拿出来写一写。

<input type="text"/>
<script type="text/javascript">
$(function(){
    $('input').on('keydowm keyup',function () {
        var textLength = $(this).val().length,//获取input的文字数量
            inputWidth = textLength*12;//12是字的宽度
        $(this).width(inputWidth);
    });
});
</script>

这个方法对于中文还是可以的,但是一般遇到中英文混合就不行了,所以如果是中英文混合的input我建议放弃。

 

二、利用scrollWidth来制作一个边长的(变不了短)

这个是有缺陷的,因为我们获取的是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>

其实JQ和原生JS一样的道理,如果你使用JQ的直接拿走就可以了,如果是原生的按照这个想法写就可以了。

 

文章链接:http://cenggel.com/js/149.html

版权声明:文章《input宽度随内容变化》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

2条回应:“input宽度随内容变化”

  1. 麻溜儿的说道:

    顶一个,正好能用上

  2. bug大神说道:

    这个不错,按照你的思路用原生写了一个,嘿嘿

发表评论

电子邮件地址不会被公开。 必填项已用*标注