hinzufügen Aktion animierte Suchformular eingeben

Question

ich basiert auf CSS eine animierte Suchformular:

DEMO: https://codepen.io/CBeghin/pen/HeuiF

die Suchleiste öffnen ich auf die Lupe Symbol klicken haben. Wenn ich ein zweites Mal auf das Lupensymbol klicke, verschwindet die Leiste wieder. Zur Bestätigung muss ich nun die "Enter" -Taste drücken, um nach meinem Stichwort zu suchen.

Anstatt die Suchleiste zu entfernen, während ich ein zweites Mal auf das Lupensymbol klicke, möchte ich eine Eingabeaktion verwenden, um nach meinem Schlüsselwort zu suchen.

Ich habe versucht, Javascript zu verwenden, aber ich die Aktion an der richtigen Stelle nicht bekommen:

$('input').click(function() { 
    var clicks = $(this).data('clicks'); 
    if (clicks) { 
    alert('open search bar'); 
    } else { 
    alert('enter search bar'); 
    } 
    $(this).data("clicks", !clicks); 
}); 

Jemand eine Idee hat, wie dies zu realisieren?

Answer 1

Sie können den Fokus Stile über Javascript, und Bewegen der Lupe vor dem Texteingabe tun dies, indem Handhabung, sobald der Benutzer sie zum ersten Mal klickt

$("input[type='text']").focus(function() { 
 
    if (!$(this).hasClass("focus")) { 
 
    \t $(this).addClass("focus"); 
 
    } 
 
    $("input[type='submit']").attr('style', 'z-index: 4'); 
 
});

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700); 
 
@import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css); 
 

 
body { 
 
\t background: #DDD; 
 
\t font-size: 15px; 
 
} 
 
#wrap { 
 
    margin: 50px 100px; 
 
    display: inline-block; 
 
    position: relative; 
 
    height: 60px; 
 
    float: right; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
input[type="text"] { 
 
    height: 60px; 
 
    font-size: 55px; 
 
    display: inline-block; 
 
    font-family: "Lato"; 
 
    font-weight: 100; 
 
    border: none; 
 
    outline: none; 
 
    color: #555; 
 
    padding: 3px; 
 
    padding-right: 60px; 
 
    width: 0px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: none; 
 
    z-index: 3; 
 
    transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); 
 
    cursor: pointer; 
 
} 
 

 
input[type="text"].focus:hover { 
 
    border-bottom: 1px solid #BBB; 
 
} 
 

 
input[type="text"].focus { 
 
    width: 700px; 
 
    z-index: 1; 
 
    border-bottom: 1px solid #BBB; 
 
    cursor: text; 
 
} 
 
input[type="submit"] { 
 
    height: 67px; 
 
    width: 63px; 
 
    display: inline-block; 
 
    color:red; 
 
    float: right; 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat; 
 
    text-indent: -10000px; 
 
    border: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
    transition: opacity .4s ease; 
 
} 
 

 
input[type="submit"]:hover { 
 
    opacity: 0.8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <form action="" autocomplete="on"> 
 
    <input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit"> 
 
    </form> 
 
</div>