码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 自适应宽度的input

时间:2016-05-12 19:58:24      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:

最近按老大嘱咐,在学一些奇奇怪怪的东西,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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!