使用 keyup 捕获 TAB 按键

2023-12-27

我需要实现 2 个目标,但我一次只实现一个目标,而不是同时实现两个目标。 首先,我有一个输入字段,当按下按键时应该触发一个事件,并且我需要捕获字段值。我使用字母、数字和 TAB 键。因此,如果我使用 keyup,它会在第一个字符处触发。如果我使用 keydown ,则需要 2 个字符才能触发,因为第一次触发时,尚未按下该字符。因此,当我第二次按时,它会触发第一个字母,依此类推。

话虽如此,很明显我需要的是 keyup 事件,将值放入字段中,然后触发该事件。但 TAB 在我的情况下有特殊含义,它不是默认行为,并且使用 TAB 键我无法捕获 e.which、e.charCode 或 e.keyCode!只有通过 keydown 我才能获得这些值!

现在我不知道该怎么办。如何捕获 TAB 键或让 keydown 捕获字段的值?

P.S 按键也可用作按键。在我获得字段值之前事件被触发

EDIT 1:这是代码:

$('input[data-action="keyupNome"]').each(function () {          
        $(this).on("keypress", function(e) {    

            //Se o campo não estiver vazio
            if($(this).val() != '') {               

                if(key != 9)  // the tab key code
                {                                                               
                    limpaCamposBusca('nome');

                    var width  = $('#nomeBusca').width();
                    $('.nomeContainer').css('width', width);            
                    $('.displayNomeTbl').css('width', width);

                    buscaEndereco('Controller/Dispatcher.php?classe=Buscas&acao=buscaEnderecoPorNome', 'nome');     

                }//if key == 9
                else {
                    alert('here');
                    e.preventDefault();
                }       
            }// val == ''   
            else {                  
                clearFields();
                clearBuscaCliente();
                reactivateFields();
            }       

        }); 
    });

诀窍是使用keydown并将字段的实际值与当前按下的字符组合起来或捕获 TABkeydown并设置一个要使用的外部变量keyup就像我的例子一样。

编辑 : 事实上,我意识到不阻止 keydown 中 TAB 的默认行为不会触发 keyup。因此,不需要任何变量,只需防止按下 TAB 键即可。无论如何,如果您提到的故障在某些情况下存在,这个版本总是有效的。

(function() {

var tabKeyPressed = false;

$("#t").keydown(function(e) {
   tabKeyPressed = e.keyCode == 9;
   if (tabKeyPressed) {
      e.preventDefault();
      return;
   }
});

$("#t").keyup(function(e) {
   if (tabKeyPressed) {
      $(this).val("TAB"); // Do stuff for TAB
      e.preventDefault();
      return;
   }

   //Do other stuff when not TAB
});

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="t" value="">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 keyup 捕获 TAB 按键 的相关文章

  • JavaScript - 无需布尔值即可运行一次

    有没有办法只运行一段JavaScript代码ONCE 而不使用布尔标志变量来记住它是否已经运行过 具体来说not就像是 var alreadyRan false function runOnce if alreadyRan return a
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • Sonar 中的 javascript 代码覆盖率

    我是使用 Sonar 和插件进行 javascript 代码覆盖的新手 使用 Sonar 分析时 有哪些可能性可以找出 javascript 代码的质量 包括代码覆盖率 目前我正在使用 karma runner 它提供代码覆盖率报告 可以在
  • 递归修剪对象中所有元素的更好方法?

    如果我有一个像这样的物体 const obj field subfield innerObj a asdasd asdas innerArr s ssad innerArrObj b adsad 我想出了这样的东西 const trimFi
  • React 应用程序中的 addEventListener 不起作用

    一些背景 我正在尝试消费自定义网络组件在 React 应用程序中并尝试监听来自 Web 组件的事件 我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件 i e
  • 限制 Dropzone 仅上传特定类型的文件

    我正在使用 Dropzone 上传文件 这是我的代码 div div
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 如何循环遍历对象数组并生成键值对?

    我有一个像这样的对象数组 let someObj items id 12 value true id 34 value true id 56 value false 我想将其添加到现有对象中 其中 id 是该对象的键 如下所示 let ob
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array
  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr
  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的
  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分
  • Aurelia - 仅 HTML 自定义元素的内联定义

    我的 Aurelia 视图模型中有一个递归对象 如下所示 Class BottomlessPit Name string MorePits BottomlessPit null 因此 我想在 Aurelia 视图中使用递归模板 它只会在一个
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 具有固定顶部菜单的语义 UI 侧边栏

    Semantic UI 对其进行预警侧边栏页面 http semantic ui com modules sidebar html usage 当侧边栏出现时 固定位置内容可能会出现改变其位置的问题 然后它提供了该问题的两种可能的解决方案
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃

随机推荐