javascript:如何使用 google keep 等原始 javascript 隐藏或删除元素？

Question

我正在尝试创建 google keep输入文本，当我点击输入文本内部时，输入标题和按钮创建显示，当我点击外部输入文本时如何隐藏它们？

这是我的版本:

    <input type="text" class="input-style target" style="display: none;" name="input-title" placeholder="TITLE">
<div class="form-group">
  <input type="text" id="inputNote" class="input-style" name="input-note" placeholder="note">
</div>
<div class="btn-action">
  <button class="btn-style target" style="display: none;">CREATE</button>
</div>

更多请访问:jsfiddle

Answer 1

我认为这就是您的要求:

inputNote.onblur = function removeContent() {
  for (var i = 0; i < target.length; i++) {
    target[i].setAttribute("style", "display: none;");
  }
}

https://jsfiddle.net/nb2eppu0/7/

您可以在此处找到有关此事件的更多信息: http://www.w3schools.com/jsref/event_onblur.asp

编辑: 正如您所评论的那样，您还需要能够在标题输入中进行书写并且能够单击按钮，我已经在所有带有表单标签的 HTML 中实现了这一点，并使用它来检查元素的焦点和模糊。

当此表单的子节点获得焦点时，它会将 showingContent 设置为 true，也许您对 blur 函数中的超时有疑问；这很简单，模糊在下一个焦点之前执行，因此，当一个元素被模糊时，它会将 showingContent 变量设置为 false 但是，如果新焦点位于父表单的另一个子项上，正如我之前所说，这个变量将变为真，并且在下一个循环中将执行超时功能。

这是最后的 fiddle :

https://jsfiddle.net/nb2eppu0/8/