【问题标题】:Submit button in Bootstrap form doesn't react on enter keyBootstrap 表单中的提交按钮对输入键没有反应
【发布时间】:2016-08-17 16:34:51
【问题描述】:

我有以下 Bootsrap 表单:

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×,
      </span>
    </button>
    <h4 class="modal-title">Datei speichern
    </h4>
  </div>
  <div class="modal-body">
    <p>Gib einen Dateinamen ein
    </p>
    <div class="form-group">
      <label class="input-label" for="project-bar-input">
      </label>
      <input type="text" class="form-control" id="project-bar-input">
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="modal-cancel btn btn-default" data-dismiss="modal">Abbrechen
    </button>
    <button type="submit" class="modal-action btn btn-primary" data-dismiss="modal">Speichern
    </button>
  </div>
</div>

我尝试使用 ENTER 键事件

$( ".modal-content" ).find( "input#submit" ).click( function() {
    // submit
});

看完后:

Submit button not working in Bootstrap form

但它不起作用。为什么?

【问题讨论】:

    标签: twitter-bootstrap button input submit bootstrap-modal


    【解决方案1】:

    $(function(){
      $('.modal-content').keypress(function(e){
        if(e.which == 13) {
          //dosomething
          alert('Enter pressed');
        }
      })
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×,
          </span>
        </button>
        <h4 class="modal-title">Datei speichern
        </h4>
      </div>
      <div class="modal-body">
        <p>Gib einen Dateinamen ein
        </p>
        <div class="form-group">
          <label class="input-label" for="project-bar-input">
          </label>
          <input type="text" class="form-control" id="project-bar-input">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="modal-cancel btn btn-default" data-dismiss="modal">Abbrechen
        </button>
        <button type="submit" class="modal-action btn btn-primary" data-dismiss="modal">Speichern
        </button>
      </div>
    </div>

    【讨论】:

      猜你喜欢
      • 2023-03-03
      • 2011-01-26
      • 2013-08-21
      • 2022-07-05
      • 1970-01-01
      • 2017-09-01
      • 1970-01-01
      • 2012-08-09
      • 1970-01-01
      相关资源
      最近更新 更多