搜索輸入焦點和變化

我正在尋找一個搜索表單，我喜歡像iOS上的搜索表單（即App Store）一樣工作焦點輸入字段延伸。如果沒有文本插入到輸入字段中，它將返回到其原始狀態。如果文字被插入，它仍處於拉伸狀態。搜索輸入焦點和變化

任何想法，我可以如何實現這一目標？非常感謝你！

HTML

<i class="fa fa-search"></i> 
<input type="text" class="form-control-filter input-filter-sm" placeholder="Search">

CSS

.input-filter { 
     width: calc (100% - 25px); 
     width: -webkit-calc(100% - 25px); 
     width: -moz-calc(100% - 25px); 
} 
.input-filter-sm { 
     width: 75px; 
}

JQUERY

$(".mobile-filter input").focusin(function(){ 
    $(".mobile-filter input").addClass("input-filter"); 
    $(".mobile-filter input").removeClass("input-filter-sm"); 
}); 

$(".mobile-filter input").focusout(function(){ 
    $(".mobile-filter input").removeClass("input-filter"); 
    $(".mobile-filter input").addClass("input-filter-sm"); 
});

來源

2014-09-24 kurious-ser

有我已經在你的代碼改變了一些事情，我改變了選擇並添加類的輸入領域。它現在正在工作。

$("input.mobile-filter").focus(function(){ 
    $("input.mobile-filter").addClass("input-filter") 
    $("input.mobile-filter").removeClass("input-filter-sm") 
}); 

$("input.mobile-filter").blur(function(){ 
    var textLen = $(this).val().length; 
    if(textLen === 0) { 
    $("input.mobile-filter").removeClass("input-filter") 
    $("input.mobile-filter").addClass("input-filter-sm") 
    } 
});

你的HTML

<i class="fa fa-search"></i> <input type="text" class="form-control-filter input-filter-sm mobile-filter" placeholder="Search">

DEMO FIDDLE

來源

2014-09-24 09:31:49 VPK

非常感謝您！ – 2014-09-24 09:37:57

@ kurious-ser，您的歡迎，也可以使用jQuery動畫方法來應用一些很酷的效果。 – VPK 2014-09-24 09:41:45

這個怎麼樣？

HTML

<i class="fa fa-search"></i> <input type="text" id="search" placeholder="Search">

的Javascript 變種inputSearch =的document.getElementById（ '搜索'）;

inputSearch.onfocus = function() { 
     inputSearch.style.width = '75px'; 
    } 

    inputSearch.onblur = function() { 
     if(!inputSearch.value) { 
     inputSearch.style.width = '100%'; 
     } 
    }

這裏是的jsfiddle：http://jsfiddle.net/nup177nd/10/

來源

2014-09-24 10:01:21 Cabezota

搜索輸入焦點和變化

回答

相關問題