Question

我正在使用（好吧，刚刚开始学习）bootstrap和javascript和jQuery。我在其他编程语言方面有相当丰富的经验，我喜欢理解会发生什么。

所以我有一个只包含一个输入框的对话框，我不希望在用户点击进入时触发POST动作。根据我的说法，我正在使用肮脏的技巧，我想知道如何更整洁地做到这一点。

<div class="modal-body">
  <form enctype="multipart/form-data" class="well">
    <input id="empty" name="empty" type="hidden"/></form>
  <table width="100%">
    <tr><td width="30%">accession#.plant#</td>
        <td><input id="addendum" name="keyword" type="text"/></td></tr>
  </table>
</div>

未使用的“空”表单，这是我在firefox 27.0.1上运行的脏技巧

我已经尝试完全禁用输入键，正如类似问题的答案所示，但根据我的说法，它有一个非理想的副作用：在输入元素中输入数据时，浏览器会给出提示。禁用回车键很难在其中进行选择。

Answer 1

如果没有看到JavaScript，很难说，但是你应该可以在JavaScript中调用事件对象上的preventDefault。这样可以防止表单提交，但不应干扰浏览器中的提前输入行为。

Answer 2

Give the form an id and then put the id in the keypress function... It should work.
<script type="text/javascript">
    $(document).ready( function() {
        $('#[formid]').keypress(function (e) {
            if (e.which == 13) {
                e.preventdefault();
                return false;
            }
        });
    });
</script>

Answer 3

您可以使用此功能，如果没有输入字段，则会阻止表单提交。

$( ".well" ).on( "submit", function() { 
  var has_empty = false;
  $(this).find( 'input' ).each(function () {
    if ( ! $(this).val() ) { has_empty = true; return false; }
  });
if ( has_empty ) { return false; }
});

编辑：将其绑定到输入侦听器：

$(".well").bind("keyup keypress", function(e) {
  var code = e.keyCode || e.which; 
  if (code  == 13) {               
    e.preventDefault();
    var has_empty = false;
    $(this).find( 'input' ).each(function () {
      if ( ! $(this).val() ) { has_empty = true; return false; }
    });
    if ( has_empty ) { return false; }
  }
});

当用户点击输入只有一个输入的表单时，请避免“提交”

3 个答案: