如何使输入类型的文本自动扩展并设置特定的宽度扩展。

问题描述:

我有一个不像我想要的那样对齐的字段
这是代码

I have a search field which doesn't align like i want to Here is the code

#menu_search{
    position: absolute;
    width: 100%;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}

所以我希望搜索位于屏幕的右侧,但仅最多1280像素,否则保持对齐至1280像素(屏幕中心)

So i want the search to be in the right part of the screen but only for max 1280 px, otherwise to maintain the alignment to 1280px (center of screen)

------------------ -------------- 1480px -----------------------------

--------------------------------1480px-----------------------------

XXXXXX ---------------------- 1280px ---------- [search] XXXXXX

XXXXXX----------------------1280px----------[search]XXXXXX

检查您的 jsFiddle



HTML



check your jsFiddle

HTML

 <input id="menu_search" type="text" size="20" placeholder="search here..." /> 



CSS



CSS

#menu_search{
    position: absolute;
    width: auto;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}



j-Query(库1.7.2)



j-Query (library 1.7.2)

$(function(){ 
    $('#menu_search').keyup(function(){ 
        var size = parseInt($(this).attr('size')); 
        var chars = $(this).val().length; 
        if(chars >= size) $(this).attr('size', chars); 
    }); 
});