Question

我已经创建了简单的搜索框，当我点击它时，它会在水平方向上扩展。

我知道，当我点击而不是水平时，如何垂直延伸。

<form action="search.php" autocomplete="on">
      <input id="search" name="search" class="search-box" type="text" 
          placeholder="What you are looking for?">
      <input id="search_submit" value="" type="submit">
</form>

DEMO

我需要访问我的搜索图标链接，此link有搜索图标..我的意思是，当我点击我的搜索图标时，它会显示文字行，背景应该处于活动状态..

Answer 1

试试这个：

jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ height: '200px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ height: '100px', backgroundColor: '#999' });
    });
});

Demo

Answer 2

只需使用高度而不是宽度。

jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ height: '100px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ height: '20px', backgroundColor: '#999' });
    });
});

Answer 3

根据您的问题，我假设您正在寻找具有多线支持的搜索框吗？如果是，那么只需添加＆＃39; HEIGHT＆＃39;不会帮助你，因为你仍然可以只用一行进入。

如果您需要 MultiLine支持，请使用 TEXTAREA 代替TEXTBOX。

如需进一步参考，您可以查看一些类似的SO问题：Multiple lines of input in <input type="text" />

对您的JS小提琴代码进行修改：这是链接：http://jsfiddle.net/btmv9kyy/

HTML

    <textarea id="search"></textarea>

jQuery代码

    jQuery(function() {
        jQuery('#search').focus(function() {
            jQuery(this).animate({ width: '100px',height: '300px', backgroundColor: '#fff' });
        }).blur(function() {
            jQuery(this).animate({ width: '100px', height: '100px', backgroundColor: '#999' });
        });
    });

CSS

    #search {
        background-color: #999;
        width: 100px;
        height:100px;
        border: 1px solid #ddd;
        outline: none;
    }

希望这有帮助。

单击搜索图标时如何禁用背景？

3 个答案: