JavaScript邏輯擴展搜索欄

我已經創建了一個擴展搜索欄：單擊放大鏡輸入擴展到右側，再次單擊它並關閉。（見下面的小提琴）。JavaScript邏輯擴展搜索欄

我是新來的JS的世界，我認爲這將是一個很好的機會來實現一些邏輯。以下是我嘗試去做的：

如果搜索欄打開並且inner.html爲空，如果您單擊「搜索」放大鏡，我想阻止默認提交表單和只需關閉搜索欄
如果有文本，我希望提交表單。

現在，我已經有了這樣一種方式分層的元素，當您第一次單擊「搜索」按鈕時，條形會延伸，按鈕的z索引將下降到實際提交按鈕更高，但我想更多地控制功能。

我嘗試什麼：

我試圖創建添加一個事件監聽器，所述的功能，基本上，如果杆具有700像素的寬度（延伸長度）和所述內HTML是空的，將擴展按鈕的z索引恢復得比提交簡單地關閉表單更高。但我似乎無法正確處理邏輯。

我想知道如何在JS中，你可以控制Z指數。

這是我嘗試過的代碼，但沒有工作。我嘗試了一些東西，只是簡單地提醒我什麼時候我想要看的任務是先完成的，但似乎沒有工作。

任何幫助將是美好的。

代碼：

HTML: 
<div id="wrap"> 
<form id="myForm"> 
    <input id="search" name="search" type="text" placeholder="What are we looking for?" /> 
    <input id="search_submit" value="" type="submit"> 
    </form> 
</div>

CSS：

#wrap 
{ 
margin: 50px 100px; 
display: inline-block; 
position: relative; 
height: 60px; 
float: right; 
padding: 0; 
} 

input[type="text"] 
{ 
height: 40px; 
font-size: 35px; 
border: none; 
outline: none; 
color: #555; 
padding-right: 60px; 
position: absolute; 
width: 0px; 
top: 0; 
right: 0; 
background: none; 
z-index: 4; 
cursor: pointer; 
transition: width .4s ease-in-out; 
} 

input[type="text"]:focus 
{ 
width: 700px; 
z-index: 1; 
border-bottom: 1px solid #bbb; 
cursor: text; 
} 

input[type="submit"] 
{ 
position: absolute; 
height: 60px; 
width: 60px; 
display: inline-block; 
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; 
border: none; 
outline:none; 
top: -15px; 
right: 0; 
z-index: 2; 
cursor: pointer; 
transition: all .4s ease; 
}

var search = document.getElementById("myForm").search; 
var search_submit = document.getElementById("myForm").search_submit; 

function showOpen() 
{ 
    if(search.style.width=="700px") 
{ 
alert("OPEN!"); 
} 
}; 


search.addEventListener("click", showOpen); 

showOpen();

這裏是FIDDLE：https://jsfiddle.net/theodore_steiner/7begmkf3/37/

來源

2016-06-09 Theodore Steiner

你能張貼您的小提琴？我已經嘗試重新創建，而且我沒有看到第一次點擊放大鏡時的效果，「該條擴展並且按鈕的z索引下降到了實際提交按鈕更高的位置。」您只有兩個輸入，即文本欄和放大鏡，並且沒有JavaScript，您可以在其中更改元素的Z-index。 – sahilkmr78

對不起，這裏是小提琴：https://jsfiddle.net/theodore_steiner/7begmkf3/37/ –

你的問題可以解決使用一些基本的JavaScript元素（如果你正在尋找進入基本邏輯，這些知道很重要）。 JS使用onsubmit，onclick和一些基本的表單邏輯。基本上，當您嘗試提交表單時，它會檢查表單是否爲空，如果是，程序拒絕提交代碼。我加入了新的JavaScript的HTML文件：

<script> 
function check(){ 
    value = document.forms["myForm"]["search"].value; 
    if(value == "" || value == null){ 
    alert("please enter a search term"); 
    return false; 
    }else{ 
    document.getElementById("myForm").submit(); 
    } 
} 
</script> 

<div id="wrap"> 
    <form id="myForm" onsubmit="return check()"> 
     <input id="searchBar" name="search" type="text" placeholder="What are we looking for?" /> 
     <input id="search_submit" value="" type = "submit"> 
     </form> 
</div>

小提琴：https://jsfiddle.net/q1L3Lstx/1/ 這也可能有助於在未來看required元素：http://www.w3schools.com/tags/att_input_required.asp

來源

2016-06-09 15:45:22 sahilkmr78

非常感謝！我可以問一下「回報錯誤」在做什麼？ –

@TheodoreSteiner當然！所以你會注意到，當你刪除聲明並提交一個空白表格時，你會得到警報並且表單將被提交。 onSubmit將在提交失敗時終止提交，如果返回true，則提交（在這裏，而不是返回true我只是手動提交文件，但兩種方式都有效）。這裏有一篇文章可能會更好地解釋：https：//www.irt.org/script/155.htm編輯：如果你不關心警報窗口，只想提交，這段代碼更簡潔快捷：https ：//jsfiddle.net/9pn9d8e1/ – sahilkmr78

非常感謝！從長遠來看，以這種方式運行還是使用e.preventDefault（）作爲窗體會更好？ –

我看見有幾個問題與代碼。

搜索和search_submit都指向了錯誤的物品，他們可以是這樣的：

var search = document.getElementById("search"); 
var search_submit = document.getElementById("search_submit");

你可以呼籲提交功能。像這樣：

<form id="myForm" onsubmit="myFunction(event)">

終於可以工作在該函數內部代碼：

function myFunction(e){ 
    if(search.value.length <= 0){ 
     e.preventDefault(); 
     alert('empty'); 
    } 
}

來源

2016-06-09 15:40:27 Buffalo

JavaScript邏輯擴展搜索欄

回答

相關問題