Question

我创建了一个展开式搜索栏：点击放大镜，输入向外延伸，向右，再次单击，然后关闭。（见下面的小提琴）。

我是JS世界的新手，我认为这将是实现某些逻辑的绝佳机会。这就是我想要做的事情：

如果搜索栏已打开且inner.html为空，如果您点击“搜索”放大镜，我想阻止默认提交表单，只需关闭搜索栏
如果有文字，我希望提交表格。

现在我已经将元素分层，这样当你第一次点击“搜索”按钮时，条形图会延伸，按钮的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();

这就是好消息：https://jsfiddle.net/theodore_steiner/7begmkf3/37/

Answer 1

您的问题可以使用一些基本的JavaScript元素来解决（如果您想要进入基本逻辑，这些都很重要）。 JS使用onsubmit，onclick和一些基本的表单逻辑。基本上，当您尝试提交表单时，它会检查表单是否为空，如果是，则程序拒绝提交代码。我将新的JavaScript添加到HTML文件中：

clean_value

小提琴：https://jsfiddle.net/q1L3Lstx/1/ 将来查看<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>元素：http://www.w3schools.com/tags/att_input_required.asp

也可能有所帮助

Answer 2

我看到了代码的几个问题。

search和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');
    }
}

扩展搜索栏中的Javascript逻辑

2 个答案: