先来最后结果：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. html表格cell合并插件

    数据展示时需要合并部分数据自己写了一个简单插件 合并前: 合并后: 调用示例: var trs = $('table#dataList tbody tr').not('#demo').get(); v ...

  2. spring集成Apache的ActiveMQ

    1.直接看优秀的博客 http://www.open-open.com/lib/view/open1435496659794.html

  3. USACO3.42American Heritage（二叉树）

    已知中前 求后序 递归一下 有一些小细节 /* ID: shangca2 LANG: C++ TASK: heritage */ #include <iostream> #include& ...

  4. bzoj1858

    比较烦的线段树 首先询问3很弱智不说, 询问4以前做过类似的,好像是USACO月赛hotel那题类似,维护lmax,rmax,max三个域就可以了 操作0,操作1也很简单,仔细考虑一下就知道也是可以l ...

  5. [SDOI2015]权值

    问题描述: 有一个长度为n的实数序列,,下标从1开始,其中第k个位置的实数为p · (sin(a · k + b) + cos(c · k + d) + 2),sin和cos采用弧度制,其中p,a,b ...

  6. Bzoj 4196: [Noi2015]软件包管理器 树链剖分

    4196: [Noi2015]软件包管理器 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 721  Solved: 419[Submit][Statu ...

  7. JSP_DAO方式实现数据库查询（MyEclipse10,Tomcat7.0,JDK1.7,）——Java Web练习（四）

    1.项目结构: 2.创建数据库.表.插入记录 create database TestDao; use TestDao; create table student( stuid int, userna ...

  8. 理解标签重置reset

    /*样式表文件来自 懒人css http://lrcss.lrjz100.com *//*---------重置---------*/html{font-size: 100%;-webkit-text ...

  9. EasyUI-在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  10. C# 如何设置 richTextBoxr的边距

    附件 http://files.cnblogs.com/xe2011/richTextBox_EM_SETRECT.rar using System.Runtime.InteropServices; ...