input宽度随内容改变

propertychange :监听input中value值的变化。

控制input的宽度跟随内容的宽度变化,大致原理其实就是,首先获取字的个数,再根据字的个数*字体的大小。最终获取的就是内容的具体宽度。

具体实现代码:

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

注:本列子基于jquery上!


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!