代码之家 › 专栏 › 技术社区 › charan kumar

在keypress javascript上调用enter事件

html jquery javascript

charan kumar · 技术社区 · 6 年前

我有以下代码,可以验证移动电话号码的最大值为10位,我使用的是input type="text" 因为 minlength 不会工作 type="number" 但问题是,当我试图通过键盘输入提交表单时,它没有提交

$('#welcome_submit').on('click', function() {
  $.ajax({
    url: '/url',
    data: $('#entry_form').serialize(),
    type: "POST",
    datatype: 'JSON',
    success: function(data) {
      alert('success');
    },
    error: function(error) {
      console.log("Error: error");
    },
  });
});
$(document).ready(function() {
  document.querySelector("input").addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
      evt.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="entry_form">
  <input type="text" value="" placeholder="Enter your Mobile Number" class="form-class" name="phone_no" autocomplete="off" autofocus maxlength="10" />
  <button id="welcome_submit" class="btn btn-continue welcome_first" type="submit">Continue</button>
</form>

在上面的代码中过滤enter事件'13'有什么想法吗?

2 回复 | 直到 6 年前

CodeF0x 6 年前

检查密码13并提交表格:

if (evt.keyCode == '13') {
  document.querySelector('#welcome_submit').click();
}

$('#welcome_submit').on('click', function() {
  $.ajax({
    url: '/url',
    data: $('#entry_form').serialize(),
    type: "POST",
    datatype: 'JSON',
    success: function(data) {
      alert('success');
    },
    error: function(error) {
      console.log("Error: error");
    },
  });
});
$(document).ready(function() {
  document.querySelector("input").addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
      evt.preventDefault();
    }
    if (evt.keyCode == '13') {
      document.querySelector('#welcome_submit').click();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="entry_form">
  <input type="text" value="" placeholder="Enter your Mobile Number" class="form-class" name="phone_no" autocomplete="off" autofocus maxlength="10" />
  <button id="welcome_submit" class="btn btn-continue welcome_first" type="submit">Continue</button>
</form>

jperez 6 年前

你可以听提交表单上的事件而不是听 键控/按键 输入上的事件:

$('#entry_form').on('submit', function(event) {
  event.preventDefault();
  var serializedData = $(this).serialize();
  // Ajax request ...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="entry_form">
  <input type="text" value="" placeholder="Enter your Mobile Number" class="form-class" name="phone_no" autocomplete="off" autofocus maxlength="10" />
  <button id="welcome_submit" class="btn btn-continue welcome_first" type="submit">Continue</button>
</form>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前