我的插件のinput文本框實現寬度自適應

2024-04-27 15:00:48

字體：大中小

來源：轉載

供稿：網友

先來最后結果：DEMO

介紹一下如何讓一個文本框的寬度能夠隨著文本框中的內容的寬度增長而增長，也就是能夠實現寬度自適應效果。

代碼實例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="skyFi.github.io/skylor" /><title>skyFi.github.io/skylor</title> 

<script type="text/javascript"> 
    window.onload=function(){ 

      var otxt=document.getElementById("txt"); 
      otxt.onkeyup=function(){ 

        this.size=(this.value.length>4?this.value.length:4); 
      } 
   } 

</script> 

</head>

 <body> 

<input type="text" id="txt" size="4"/> 

</body> 

</html>

查看演示：input文本框實現寬度自適應

以上代碼實現了我們的要求，代碼非常的簡單，注冊onkeyup事件處理函數，此函數可以判斷當前輸入內容的長度是否大于默認長度，如果不大于，則文本框的長度就是4，否則就是輸入內容的長度。

但是，這個方式實現了英文輸入能夠很好地工作，可是當遇到使用中文輸入法的時候就不是那么的好用了。因為一般中文輸入法都是先有英文，按下space后才把文字輸入到輸入框的，這會照成計算錯誤。

而且這個一般不能滿足大多數人的需求，于是我又弄一種并組裝了下：請看代碼

;(function ($) {        $.fn.autoFit = function() {            var $this = $(this);            var oldWidth = parseInt($this.CSS('width'));            $this.keydown(function (event) {                var $this = $(this);                setTimeout(function() {                    var val = $this.val().replace(/ /g, '&nbsp');                    var fontSize = $this.css('font-size');                    var fontFamily =  $this.css('font-family');                    var padding = $this.outerWidth() - $this.width();                    var contentWidth = $('<span id="autowidthforinputtext" style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; font-family: ' + fontFamily + '; display: block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth();                    var newWidth = ((contentWidth + padding) > oldWidth) ? (contentWidth + padding) : oldWidth;                    $('#autowidthforinputtext').remove();                    $this.width(newWidth + 'px');                }, 0);            });            return $this;        };})(this['jQuery']);$('#txt').autoFit();