删除输入字段默认宽度

时间:2011-10-11 11:37:53

标签: html css css3

我有input field用户和&其他如电子邮件,电话等。

我想要input field获取其内容的width,因为用户名可以很小&很大但现在如果文本很小会发生什么,需要default width从右边留下一些不需要的空间。

我尝试了float, inline,但没有任何作用。

检查小提琴http://jsfiddle.net/sandeep/Qa8R5/

我不想要这个javascript

由于

3 个答案:

答案 0 :(得分:5)

没有办法只使用CSS来使input元素与其中的文本一样宽。

原因是inputreplaced element

这一事实

您需要JavaScript like this

答案 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, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                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/