先来最后结果：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();

于是这个就可以很好地工作了，恩，自己很满意。测试路子. github源码

想了下还是简单分析下吧：

1、这是Q的fn扩展，好处是可以直接JQuery对象用’.‘就能调用我的函数。

2、采用闭包避免命名污染，同时包装记录最开始用户定义的input宽度。

3、巧妙使用0延时的setTimeout使得插件很好地支持了中文输入法带来的之前的BUG。至于为什么，我的另一篇文章中有介绍，setTimeout执行队列啥的。

4、对输入的空格做了转码处理。

我的插件のinput文本框实现宽度自适应的更多相关文章

  1. input文本框实现宽度自适应代码实例，input文本框

    本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...

  2. input文本框实现宽度自适应代码实例

    代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...

  3. input文本框自适应文本内容宽度

    input文本框自适应文本内容宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. chrome表单自动填充导致input文本框背景变成偏黄色问题

    你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...

  5. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  6. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  7. input 文本框和 img 验证码对齐问题

    input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...

  8. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  9. chrome下input文本框自动填充背景问题解决

    chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...

随机推荐

  1. openCV python 安装

    0, 用 import cv 测试,发现没有安装 opencv 模块. 首先先说本开发环境是在windows xp的环境下进行搭建的. 在搭建的过程中需要保证这三个条件: 1.python需要安装py ...

  2. 查看本机上的端口使用情况netstat -an

    1.查找本机上的端口使用情况 netstat -an 2.查找指定端口的使用情况 C:\Windows\System32>netstat -ano | find "8002" ...

  3. lsof 拥有更多的功能

    lsof 拥有更多的功能# lsof -i 看系统中有哪些开放的端口,哪些进程.用户在使用它们,比 netstat -lptu 的输出详细. # lsof -i 4  查看IPv4类型的进程COMMA ...

  4. redhat下升级gcc编译器

    在有网络的环境下,采用下载gcc源码进行编译的方式升级gcc版本,所以需要本身已有gcc编译器. 获取 gcc-4.9.2的包: wget http://gcc.skazkaforyou.com/re ...

  5. oracle查询转换_view merge

    oracle对于子查询的支持做的很好,oracle optimizer会对inline view进行query transfomation,即视图合并,不过也经常带来意想不到的问题.下面是一个inli ...

  6. 非sqlite和nigix的开源c项目

    1.http://code.google.com/p/friso/ 一.friso中文分词器 Friso是使用c语言开发的一款高性能中文分词器,使用流行的mmseg算法实现.完全基于模块化设计和实现, ...

  7. 从零开始学习jQuery

    转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...

  8. 开源库CImg 数据格式存储

    CImg为开源图像处理库,仅有一个头文件CImg.h便包含了对图像的所有处理函数,函数操作简单,编程方便,但国内使用者较少 其homepage:http://cimg.sourceforge.net/ ...

  9. nopCommerce_3.00-Nop.Core.Caching

    namespace Nop.Core.Caching { /// <summary> /// Cache manager interface /// </summary> pu ...

  10. 批量导入图片到word并添加文件名

    Sub InsertPic() Dim myfile As FileDialog Set myfile = Application.FileDialog(msoFileDialogFilePicker ...