Jquery 自适应宽度的input

标签：

最近按老大嘱咐，在学一些奇奇怪怪的东西，gulp，sass，react啥的...

还在做一个仿QQ邮箱的添加联系人的那个东西。

对，就是这个。

我本来对这个的操作只有可以选人，可以删除选中的人...

但是！！！‘

开始做了之后，才发现哪里有我想的那么简单！！！

被卖了！！！

这里，主要是做一个所谓的自适应宽度的input框。

我纠结了很久。

只有一个思路：获取input框里的值的宽度，再去给width宽度！

就是因为这个思路！

中断了一个月。

思路出问题了。

一个月后的我，也就是现在，在网上找了一些东西。

大部分都是08，09年贴出来的代码。

都是用JS。

=。=可是我Js手残啊，我Jquery写的比较多。

额，反正看了那些代码后，有一些是跟我上面的思路一样。

上面那个思路唯一的问题是无法确定获取的值的长度。汉字，英文，标点符号，数字，还有那些奇怪的符号？难道要写一个正则表达式？！

不行不行，我不会正则！

然后看到了一个新的思路：获取实时获取input框的值，把它丢到一个标签里，然后去用width()获取长度返回给input！

例子在这里，戳

=。=啊，因为一开始没成功，所以我还评论了，亲测无效！

例子里面用的标签是pre。

所以如果从input框里获取一个值，然后丢入pre里，pre是会占满一整行的。这个时候input框给的值是非常长的。但是因为我只想要文字的宽度，纯文字的宽度！所以，我把pre改成了span。例子里面有代码，我这里就在贴一次。

$("#test1").unbind('keydown').bind('keydown', function(){
			$(this).width(textWidth($(this).val()));
	    });

 var textWidth = function(text){ 
	      var sensor = $('<span>'+ text +'</span>'); 
	      $("#test-part").append(sensor); 
	      var width = sensor.width();
	      sensor.remove(); 
	      return width;
	  };

然后就！阔！以！了！

思路不对搞死人啊

************************************************我是5月9日当天的修正线****************************************************************

我刚刚一直以为是标签pre所以才会占满一整行...但是不是。

上面的例子与我参考的代码差别不止在于标签不同，我并没有给display:none这个属性。

貌似是这个的原因，影响了占满一行的原因。

另，并没有测过别的浏览器，目前只在chrome浏览器下做了实验。

要等基本的人员选择器做好了才回去别的浏览器下面测试。

Jquery 自适应宽度的input

标签：

原文地址：http://blog.csdn.net/maggiegu/article/details/51351351