使input文本框随输入内容变化长度的方法

使input的宽度能随着输入的内容而跟着变化,最初用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改变宽度的效果。

propertychange(属性改变事件):监听input里面的字符变化,该事件不仅仅会监听到input的value属性,还包括其他标签的属性各种属性发生变化都会发生该事件,比如span元素的style属性。在事件发生时还可以用event.propertyName访问到改变的属性名。在网上查到说这个属性是IE专属的,但是我在其他浏览器中,这个属性也是一样起了效果。

<input class="aa" type="text" value id="a" name="ss">来点>我1
<input class="aa" type="text" value id="s" name="ss" />来点/>我2
<input class="aa" type="text" value id="d" name="ss">来点<></>我3</input>
<script> 
$(function(){
                //propertychange监听input里面的字符变化,属性改变事件
                $('.aa').bind('input propertychange', function() {
                    var $this = $(this);
                    console.log($this);
                    var text_length = $this.val().length;//获取当前文本框的长度
                    var current_width = parseInt(text_length) *16;//该16是改变前的宽度除以当前字符串的长度,算出每个字符的长度
                    console.log(current_width)
                    $this.css("width",current_width+"px");
                });
            })
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值