扩展搜索栏中的 Javascript 逻辑

Question

我创建了一个扩展的搜索栏:您单击放大镜，输入向右扩展，再次单击它，它会关闭。 (参见下面的 fiddle )。

我是 JS 世界的新手，我认为这将是实现某些逻辑的绝佳机会。这是我正在尝试做的事情:

1. 如果搜索栏是打开的，inner.html 是空的，如果你点击“搜索”放大镜，我想阻止表单的默认提交，直接关闭搜索栏
2. 如果有文本，我希望提交表单。

现在我已经将元素分层，当您第一次单击“搜索”按钮时，栏会延伸并且按钮的 z-index 会下降到实际提交按钮所在的位置更高，但我想更多地控制功能。

我尝试过的:

我尝试创建一个添加事件监听器的函数，基本上，如果栏的宽度为 700px(扩展长度)并且内部 html 为空，则将扩展按钮的 z-index 调高比提交只是关闭表单。但我似乎无法正确解决逻辑问题。

我想知道在 JS 中如何控制 z-index。

这是我试过但没有用的代码。我尝试了一些简单的方法，比如在我想要监视的任务首先完成时发出警报，但它似乎不起作用。

任何帮助都会很棒。

代码:

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;
}

JS

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/

Answer 1

您的问题可以使用一些基本的 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>

fiddle :https://jsfiddle.net/q1L3Lstx/1/将来查看 required 元素可能也会有所帮助:http://www.w3schools.com/tags/att_input_required.asp