如何使用键 enter + onclick 关闭我的模式答案

【问题标题】：How to close my modal with the key enter + onclick如何使用键 enter + onclick 关闭我的模式
【发布时间】：2018-02-26 17:48:15
【问题描述】：

我有一个接受输入并将其显示在屏幕上的模式，当我按下“保存”按钮时它工作正常。但是当我按下回车键时，我希望它能够工作。我找到了一些答案，但它并不真正适合我的代码，因为我想要 onClick 和按 Enter 键。我也尝试将按钮更改为“提交”类型，但效果不佳。有没有一种快速简单的方法可以用我当前的代码做到这一点？

    function addMovie() {
    
      var i = document.getElementById('addedMovie');
      var d = document.createElement('div');
      d.id = "new-movie";
      d.innerHTML = "<p>" + "<img src='../images/movie.png'>" + i.value + "</p>";
      var p = document.getElementById('related-movies');
    
      p.appendChild(d);
    
    }

      <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Add a movie</h4>
          </div>
          <div class="modal-body">
            <input type="text" placeholder="Movie title" name="movies[]" class="modal-input" id="addedMovie">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-login" data-dismiss="modal" onClick="addMovie();clearModal()">Save</button>
          </div>
        </div>

或者是否有更简单的方法来做到这一点（例如，通过在模式中提交输入并将其显示在我选择的 div 上？因为目前我只是在输入中获取值，但我没有不认为我将其保存到变量中）

非常感谢您的帮助！

【问题讨论】：

您的 HTML 中 ID 为 related-movies 的元素在哪里？
你有两种方法，一种是听 onsubmit 不只是在变化和你的登录按钮类型是提交。第二个是触发相同的功能是两个不同的事件，一个 onclick 和一个当用户按下 enter 键时。
如果您将 html 代码包装在
标记中，则如果您的任何表单输入具有焦点，则 enter 将起作用。然后，如果你真的需要它，你可以使用 JS 来保持对输入/按钮的关注，如果没有关注任何元素。
嗨，“相关电影”是我添加输入的 html 开头的 div。最后一个解决方案似乎有效！

标签： javascript

【解决方案1】：

添加检查输入键 -

 <div id="modal" class="modal-content"> ...
   <input type="text" placeholder="Movie title" name="movies[]" class="modal-input" id="addedMovie" onkeypress="check(event)">
 </div>

function check(e) {
  if(e.key === "Enter") {
    addMovie();
    $('#modal').modal('hide');
  }
}

【讨论】：

嗨！非常感谢:) tje modal hide 不起作用
你添加了模态ID吗？
$('.modal').modal('hide');工作正常非常感谢:)
@Jessicascn 如果对您有帮助，请采纳答案。

【解决方案2】：

在文本框中添加一个 onkeypress 事件监听器并检查是否按下了回车键这是plunker

 <input onkeyup="save(event)" type="text" placeholder="Movie title" name="movies[]" class="modal-input" id="addedMovie">

Javascript

function save(e){
 var key = 'which' in e ? e.which : e.keyCode;
 if (key == 13) {
   addMovie()
 }
}

【讨论】：

你忘记关闭模态
好吧，我真的没有模态..我认为这个问题与如何使用 onEnter 更相关......因为我们不知道他为模态使用什么框架.. $ ('#modal').modal('hide') 是 jquery ......对于基础 css 它的 wolud 是不同的，对于 vue.js 也是另一回事
是的，但在标题“如何关闭我的模式”中说
非常感谢，效果很好！我只需要在函数中添加clearModal
是的，我不知道为什么它实际上没有关闭模式，我只是使用引导程序