扩展搜索栏中的 Javascript 逻辑答案

【问题标题】：Javascript Logic in Extending Search Bar扩展搜索栏中的 Javascript 逻辑
【发布时间】：2016-06-09 12:46:57
【问题描述】：

我已经创建了一个扩展搜索栏：您单击放大镜，输入延伸到右侧，再次单击它并关闭。（参见下面的小提琴）。

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

如果搜索栏打开并且inner.html为空，如果点击“搜索”放大镜，我想阻止默认提交表单，干脆关闭搜索栏
如果有文本，我希望提交表单。

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

我的尝试：

我尝试创建一个添加事件侦听器的函数，它说，基本上，如果栏的宽度为 700 像素（扩展长度）并且内部 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;
}

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/

【问题讨论】：

你能把你的小提琴贴出来吗？我已经尝试重新创建，但我看不到当您第一次单击放大镜时，“栏会延伸，按钮的 z-index 会下降到实际提交按钮更高的位置。”您只有两个输入，文本栏和放大镜，并且没有 javascript 可以更改元素的 z-index。
对不起，这里是小提琴：jsfiddle.net/theodore_steiner/7begmkf3/37

标签： javascript css html dom search

【解决方案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>

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

【讨论】：

非常感谢！请问“return false”是干什么的？
@TheodoreSteiner 肯定！因此，您会注意到，当您删除该语句并提交一个空白表单时，您将收到警报并且表单将被提交。 onSubmit 如果给出 false 将终止提交，如果返回 true 则提交（这里，我只是手动提交文件，而不是返回 true，但两种方式都有效）。这是一篇可能更好解释的文章：irt.org/script/155.htm 编辑：如果您不关心警报窗口而只想提交，则此代码更简洁，更快：jsfiddle.net/9pn9d8e1
非常感谢！从长远来看，以这种方式运行或将 e.preventDefault() 用于表单会更好吗？
不能确定哪个更快，但 e.preventDefault() 可能更容易用更少的行编写
这可能是一个愚蠢的问题，但我尝试处理您的代码并将其放入 JS 部分，但现在它不起作用...是否有特定原因必须在 html 之上？

【解决方案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');
    }
}

【讨论】：