先来最后结果：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. statspack系列6

    原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-6/ 作者:Jonathan Lewis 下面是一段时间以前网 ...

  2. Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息

    跨平台这种事情不管多NB, 总要有些与原生系统交互的方法, 比如  Unity3D与iOS消息交互方法. 一: 建立一个空的Unity工程. File -->  New Project 二: 编 ...

  3. selenium-webdriver的等待方法

    Wait commands in WebDriver Listing out the different WebDriver Wait statements that can be useful fo ...

  4. Linux之sed详解

    转载:http://blog.chinaunix.net/u/22677/showart_1076318.html   1.简介 sed是非交互式的编辑器.它不会修改文件,除非使用shell重定向来保 ...

  5. 特性扩展：WebActivatorEx

    WebActivator: PreApplicationStartMethod 属性,用于标记作为东西您获取 Web 应用程序启动时调用的方法,在Application_Start前. PostApp ...

  6. Java编程常见问题汇总

    每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般没有什么大问题,但是最好别这样做.另外这里提到的很多问题其实可以通过Findbugs( h ...

  7. web前端开源小案例:立方体旋转

    HTML部分: <body class="body"> <div class="rect-wrap">   <!-- //舞台元素 ...

  8. 当可以设置src时,不必发ajax请求,如果没有参数设置src即可

    var params = (function(obj){ var string = []; for(var key in obj){ string.push(window.encodeURI(key) ...

  9. Swift中UITableView的简单使用

    Swift中的注释 使用"// MARK:- 注释内容",对属性或方法进行注释 使用"///注释内容"对属性或方法提供调用说明的注释 使用extension对同 ...

  10. Android五大布局重新回顾