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 -->