您的位置:首页 > 其它

input 随其内容而变化长度

2017-04-07 09:32 218 查看
做页面表单时候,需要input随着其内容而变化长度。网上找了不少资料,发现propertychange(属性改变事件)很适用。

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

$(function(){
//propertychange监听input里面的字符变化,属性改变事件
$('.zy-price').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");
});
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: