先来最后结果：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. Android 删除指定文件代码

    package com.tware.pdfdrop; import java.io.File; import android.app.Activity; import android.graphics ...

  2. 【HDOJ】2612 Find a way

    BFS. #include <iostream> #include <cstdio> #include <cstring> #include <queue&g ...

  3. oracle查询转换_inlist转换

    oracle的optimizer会对一些sql语句进行查询转换,比如: 合并视图 子查询非嵌套化 inlist转换 下面讲讲遇到的in list转化优化的案例: create table test( ...

  4. POJ_3579_Median_(二分,查找第k大的值)

    描述 http://poj.org/problem?id=3579 给你一串数,共C(n,2)个差值(绝对值),求差值从大到小排序的中值,偶数向下取. Median Time Limit: 1000M ...

  5. How to Create a SharePoint 2010 Project Without SharePoint Server

    转:http://community.bamboosolutions.com/blogs/sharepoint-2010/archive/2012/06/21/create-a-sharepoint- ...

  6. 【Android 复习】：第02期：引导界面（二）使用ViewPager实现欢迎引导页面

    一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似,有图才有真相嘛,呵呵.           二.编码前的准 ...

  7. 关于.ToList()： LINQ to Entities does not recognize the method ‘xxx’ method, and this method cannot be translated into a store expression.

    LINQ to Entities works by translating LINQ queries to SQL queries, then executing the resulting quer ...

  8. HDJ -- 1022

    #include<iostream> #include<cstdio> #include<string> #define MAXN 10 using namespa ...

  9. vss搭建于操作

    1.下载的vvs2005,下载后先安装在服务器上,反正就是下一步下一步就对了 安装完成后,打开miscrosoft visual sourcesafe,---create  connection da ...

  10. usaco 土地并购 && hdu 玩具装箱

    土地并购: Description 约翰准备扩大他的农场,眼前他正在考虑购买N块长方形的土地.如果约翰单买一块土地,价格就是土地的面积.但他可以选择并购一组土地,并购的价格为这些土地中最大的长乘以最大 ...