Question

我有一个输入并在屏幕上显示的模态，当我按下“保存”按钮时它工作正常。但是当我按下键进入时，我希望它能够工作。我找到了一些答案，但它并不适合我的代码，因为我想要onClick并按下回车键。我也尝试更改“提交”类型的按钮，但它不能正常工作。使用我当前的代码有一种快速而简单的方法吗？

    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上？例如？因为目前我只是在输入中取值但我不喜欢我认为我将其保存为变量）

非常感谢你的帮助！

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

Answer 2

将onkeypress事件侦听器添加到文本框并检查是否按下了enter键这是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()
 }
}

如何用键输入+ onclick来关闭我的模态

2 个答案: