如何使输入类型的文本自动扩展并设置特定的宽度扩展。 [英] How to make input type text auto-expand also set specific width expand.

问题描述

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

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); 
    }); 
}); 

这篇关于如何使输入类型的文本自动扩展并设置特定的宽度扩展。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！