03- 自動改變input 的大小

03- 自動改變input 的大小

    httpsss://js.do/powenko/04-inputstringlengthutf8

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
    .input_area span{   
        display:block;   
        float:left;   
        width:100px;   
        text-overflow:ellipsis;   
        overflow:hidden;   
    }  
    </style>
    
    <div class="input_row clearfix">  
        <label>Account</label>  
        <div class="input_area">  
            <input type="text" class="input_field" size="2">  
            <span title="thisisacompanythisisacompany">@thisisacompanythisisacompany</span>  
        </div>  
    </div>
    <script>
    // Edit your script here
    function stringBytes(c){
      var n=c.length,s;
      var len=0;
      for(var i=0; i <n;i++){
       s=c.charCodeAt(i);
       while( s > 0 ){
          len++;
          s = s >> 8;
       }
      }
      return len;
    }
    function resizeInput() {   
            $length=$(this).val().length;   
            if($length==0){   
                $(this).attr('size', 2);   
            }else if($length<15){   
                $(this).attr('size',stringBytes( $(this).val()));   
            }else{   
                $(this).attr('size', 15);   
            }      
    }   
    $('.input_field')   
        // event handler   
        .keyup(resizeInput)   
        // resize on page load   
        .each(resizeInput);   
    
    </script>
    <!-- edit your html here -->