使input文本框随内容变化改变长度

最新推荐文章于 2024-09-24 22:02:26 发布

原创最新推荐文章于 2024-09-24 22:02:26 发布 · 1w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#input #文本框长度

收录于

常用小知识专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的输入框文字长度自适应调整宽度的方法。通过监听input事件及propertychange事件，根据输入文本的长度动态调整输入框宽度。

propertychange——属性改变事件

<script type="text/javascript">
$(function(){
    $('.input').bind('input propertychange',function(){
        var obj = $(this);
        var text_length = obj.val().length;  //获取当前长度
        var width = parseInt(text_length)*12; //该12是改变前的宽度除以当前字符串的长度，算出每个字符的长度
        obj.css('width',width+'px');
    });
})
</script>