當我點擊搜索圖標時如何禁用背景？

我已經創建了簡單的搜索框，當我點擊時，它會在水平方向擴展。當我點擊搜索圖標時如何禁用背景？

我可以知道，如何垂直延伸，當我點擊而不是水平。

<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有搜索圖標..我的意思是，當我點擊我的搜索圖標，它會顯示文本行和背景應該是積極..

來源

2015-05-19 pcs

https://jsfiddle.net/tusharj/va1yLn1m/1/ – Tushar

可能重複[如何在點擊時展開文本區域]（http://stackoverflow.com/questions/5648464/how-to-expand -a-text-area-when-click-on） –

我的問題已更新... – pcs

試試這個：

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

Demo

來源

2015-05-19 07:01:40

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

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

來源

2015-05-19 07:01:45 DonX

根據您的問題，我認爲你是多線支持右找搜索框？如果是的話，那麼只要添加「HEIGHT」就不會對你有幫助，因爲你仍然只能進入一條線。

如果你需要多行支持然後使用TEXTAREA，而不是文本框。

有關進一步的參考，你可以檢查一些類似的SO問題（S），如：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; 
    }

希望這會有所幫助。

來源

2015-05-19 09:26:08

當我點擊搜索圖標時如何禁用背景？

回答

相關問題