我有input field
用户和&其他如电子邮件,电话等。
我想要input field
获取其内容的width
,因为用户名可以很小&很大但现在如果文本很小会发生什么,需要default width
从右边留下一些不需要的空间。
我尝试了float, inline
,但没有任何作用。
检查小提琴http://jsfiddle.net/sandeep/Qa8R5/
我不想要这个javascript
由于
答案 0 :(得分:5)
答案 1 :(得分:1)
我知道你说你不想要JavaScript,但JS是回答你问题的唯一方法。
这是演示此功能的a working fiddle。下面是完成它所需的代码。资料来源:jQuery - auto size text input (not textarea!)
<强>插件:强>
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
<强>用法:强>
$('input#myinput').autoGrowInput({
comfortZone: 50,
minWidth: 200,
maxWidth: 2000
});
答案 2 :(得分:0)
您必须使用Javascript或其他可以动态生成内容的内容。 HTML和CSS无法做到这一点。这是一个使用jQuery的解决方案,接受或保留它:http://jsfiddle.net/Qa8R5/3/