zoukankan      html  css  js  c++  java
  • 使input文本框随其中内容而变化长度的方法

    最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改变宽度的效果。于是查了资料之后,发现了一个事件,很是好用。

    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");
                    });
                })
    

      

    
    
  • 相关阅读:
    好用的QT连接
    c指针点滴-指针与类型
    c指针点滴5-指针变量计算
    c指针点滴4-指针的值
    c指针点滴三(指针运算)
    c语言指针点滴1
    c指针点滴2之比大小
    c指针点滴1
    linux安装redis
    支付宝支付接口流程
  • 原文地址:https://www.cnblogs.com/cythia/p/5977643.html
Copyright © 2011-2022 走看看