我的插件の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();