当我们从文本框中按 Enter 键时,在单个 jQuery 方法中处理多个操作

Posted

技术标签:

【中文标题】当我们从文本框中按 Enter 键时,在单个 jQuery 方法中处理多个操作【英文标题】:Handle multiple operations inside a single jQuery method when we press Enterkey from a textbox 【发布时间】:2020-11-25 06:24:51 【问题描述】:

在一个文本框中输入文本后单击回车键时,我想处理两个操作。 两个操作是

    将光标移动到下一个文本框 使用php代码建立串口通信

$(function() 
  $('input:text:first').focus();
  var $inp = $('input:text');
  $inp.bind('keydown', function(e) 
    //var key = (e.keyCode ? e.keyCode : e.charCode);
    var key = e.which;
    if (key == 13)  // Enter key is pressed
      e.preventDefault(); // Prevent the default behaviour of enter key
      var nxtIdx = $inp.index(this) + 1;
      $(":input:text:eq(" + nxtIdx + ")").focus();
      // Ajax query to send request to php
      var test = $("#command-text").val();
      var inputtext = test;
      var command = "1";
      // var mode = $(".common-input mb-20").val();
      $.ajax(
        type: "POST",
        url: "controller.php",
        data: 
          inputtext: inputtext,
          command: command
        ,
        cache: false,
        success: function(html) 
          var feedback = "@" + $("#command-text").val() + "#";
          $("#feedback").val(feedback);
        
      );
    
  );
);

当我尝试使用以下代码时,只执行一个操作,光标将移动到下一个文本框或建立通信。 请帮我解决这个问题 我试过的代码如下

【问题讨论】:

【参考方案1】:

你使用了不正确的语法你的括号位置不正确试试这个:

$(function() 
  $('input:text:first').focus();
  var $inp = $('input:text');
  $inp.bind('keydown', function(e) 
    //var key = (e.keyCode ? e.keyCode : e.charCode);
    var key = e.which;
    if (key == 13)  // Enter key is pressed
      e.preventDefault(); // Prevent the default behaviour of enter key
      var nxtIdx = $inp.index(this) + 1;
      $(":input:text:eq(" + nxtIdx + ")").focus();
      // Ajax query to send request to php
      var test = $("#command-text").val();
      var inputtext = test;
      var command = "1";
      // var mode = $(".common-input mb-20").val();
      $.ajax(
        type: "POST",
        url: "controller.php",
        data: 
          inputtext: inputtext,
          command: command
        ,
        cache: false,
        success: function(html) 
          var feedback = "@" + $("#command-text").val() + "#";
          $("#feedback").val(feedback);
        
      );
    
  );
);

【讨论】:

尝试通过更正语法,但仍未建立到使用 php 的端口的串行通信。 你想在文档准备好时执行你在 $(function () ) 中写的内容 在输入文本框中输入文本后按回车键时,我需要执行这两个操作。 通过重写代码以在文档准备好时执行并将绑定事件更改为 keyup 事件解决了该问题。感谢您的大力支持。

以上是关于当我们从文本框中按 Enter 键时,在单个 jQuery 方法中处理多个操作的主要内容,如果未能解决你的问题,请参考以下文章

在 VC6-MFC 中按 ENTER 键时的 TAB 效果

从html输入文本框中按回车键时如何防止回发?

当用户在文本框中按下返回时,我可以取消回发吗?

在文本框中按 Enter 时如何触发 HTML 按钮?

MS Access Form - Enter 键未移动到新行

如何在 keydown 事件后在文本框中按 enter 删除虚拟键盘