先来最后结果：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. async await 异步编程杂记

    1. async 仅仅是用了标记 方法中有异步调用(就是有await...) 2  await  用来把「当前线程」中的代码“分成片”,通过一定条件和事件回调的形式  “依次执行”. 3. await ...

  2. ruby迭代器iterator和枚举器Enumerator

    编写自定义的迭代器 The defining feature of an iterator method is that it invokes a block of code associatedwi ...

  3. 利用CMake生成动态或静态链接库工程

    install解释: TARGETS版本的install命令 install(TARGETS targets... [EXPORT <export-name>] [[ARCHIVE|LIB ...

  4. 【Bower】

    Bower Bower:客户端库管理工具 Day 1: Bower —— 管理你的客户端依赖关系 bower解决js的依赖管理

  5. Android之sqlite 命令

    1.数据库.表的建立,记录的添加.查询.修改和删除 F:">sqlite3 database.dbsqlite> create table admin(username text ...

  6. GeoServer基础教程（一）：环境搭建篇

    转自:http://imxz.me/tech/3sdev/installation-of-geoserver.html GeoServer的是一个基于Java的软件,它允许用户查看和编辑地理空间数据, ...

  7. c# const与readonly 关键字的比较

    C#中,const 与readonly是两个比较有用的关键字.const 与 readonly 定义的数据成员在初始化都不能再改变. 比如定义了 public class MathUtitlity   ...

  8. 我记录综合系统学习研究之用户管理五（如何利用wojilu打造一个全新的SNS应用）

    wojilu框架特别适合快速开发多用户分享内容应用,比如知乎,digg这类应用. 对于博客等用户程序,要有4个入口:1)用户展示入口(展示自己的应用) 2)用户后台管理入口(管理自己的应用) 3)聚合 ...

  9. objective-c中点语法的使用

    点语法的作用:提供一种访问属性的setter和getter的机制. 用法举例: 1.创建一个Person类,并声明属性.在person.h中. 2.实现一个init方法,并使用点语法等.在pers.m ...

  10. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...