keydown 事件中的输入验证

2024-01-04

我正在尝试在以下过程中对用户文本输入进行信息验证keydown事件。我试图验证的原因是keydown事件是因为我不想显示那些被认为是非法的字符input开头的盒子。

我写的验证是这样的,

function validateUserInput(){
   var code = this.event.keyCode;
    if ((code<48||code>57) // numerical
      &&code!==46 //delete
      &&code!==8  //back space
      &&code!==37 // <- arrow 
      &&code!==39) // -> arrow
   {
     this.event.preventDefault();        
    }
}

我可以继续这样,但是我看到了这种实现的缺点。例如,这些是:

  1. 当我输入更多的条件来检查时,条件语句变得越来越长。
  2. keyCodes不同浏览器可能会有所不同。
  3. I have to not only check what is not legal but also have to check what are exceptional. In above examples, delete, backspace, and arrow keys are exceptional.

但我不想失去的功能是不显示输入textarea除非通过验证。 (如果用户尝试在其中输入非法字符textarea,什么都不应该出现)这就是为什么我不进行验证keyup event.

所以我的问题是:

  1. 有没有更好的方法来验证输入keydown事件而不是检查keyCode by keyCode?
  2. 除了捕获用户输入之外还有其他方法吗keydown浏览器显示之前发生的事件?以及一种对其进行验证的方法?

如果您正在检查可打印的密钥(这正是您似乎正在做的事情),您应该使用keypress相反,因为这是您能够获得有关按键所代表的字符的可靠信息的唯一地方。您无法可靠地检测数字按键keydown事件。此外,抑制箭头键和删除/退格键也是一个坏主意。这样做你能得到什么?

还有一些错误:在 Firefox 中,您需要获取Event传递到事件处理函数的参数中的对象,如果您使用的是 DOM0 事件处理函数而不是addEventListener() or attachEvent(),你应该使用return false;抑制默认行为。这是我推荐的代码:

var input = document.getElementById("your_input_id");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (/\d/.test(charStr)) {
        return false;
    }
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

keydown 事件中的输入验证 的相关文章

  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl
  • 我希望 jQuery 验证器向表单元素的父级添加一个类

    我该如何使用jQuery 验证器 http docs jquery com Plugins Validation添加 删除类名 例如validate 在表单元素的父元素上 li 这样我就可以通过仅设置一个类名来设置与该元素相关的所有内容的样
  • 将 R (ramda) 导入 typescript .ts 文件

    我正在尝试使用Ramda js如下
  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you
  • 为什么隐式符号到字符串转换会导致 JavaScript 中出现类型错误?

    有一个 toString on Symbol在 ES6 中 它返回字符串表示形式Symbol 但想知道为什么 Symbol 不起作用 运行这个表达式会抛出TypeError我没想到 后者只是打电话吗 toString 在一个新的Symbol
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • Rails:找不到 JavaScript 运行时。有关可用运行时的列表,请参阅 https://github.com/sstephenson/execjs。 (ExecJS::运行时不可用)

    自从几周前 Dreamhost 升级了服务器以来 我的网站就被破坏了 我一直在努力解决它并取得了一些进展 但我仍然坚持希望是最后的问题 我在 Ruby 1 8 7 上使用 Rails 3 1 1 并收到来自 PhusionPassenger
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • JavaScript 中的实时摩尔斯电码转换器

    在看到谷歌关于莫尔斯电码 gmail 的愚人节笑话后 我想我应该尝试用 javascript 创建一个实时莫尔斯电码转换器 我正在使用正则表达式和替换将莫尔斯电码更改为字符 例如 replace g a replace g r 我遇到的问题
  • Django 将 JSON 数据传递给静态 getJSON/Javascript

    我正在尝试从 models py 中获取数据并将其序列化为views py 中的 JSON 对象 模型 py class Platform models Model platformtype models CharField max len
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我
  • p5 向量减法“sub”返回错误

    我一直在尝试将 p5 草图上传到 React 构建中 使用react p5 wrapper 我能够成功在屏幕上渲染画布 但是 某些矢量函数会导致错误 var distance this position dist ball position
  • 如何获得 JavaScript 阶乘程序的循环来显示所使用的工作?

    你好 我面临着用 JavaScript 编写一个程序的挑战 尽管我对它不太了解 但它要求用户输入一个数字 然后计算该数字的阶乘 我使用了已经提出的问题并设法使计算正常工作 但无法获得所需的输出 我必须在以下输出中获取它 而不使用任何花哨的库

随机推荐

  • 无法更改 Unity 中 Inspector 变量中的数组大小?

    根据我读到的内容 这就是矢量 大小 的设置方式 public Color teamAColors new Color 4 But when the code is run it looks like this 我为 4 设置的数字似乎并不重
  • 为什么 Rails 命令强制显示“new”命令的帮助消息?

    奇怪的是 在某些情况下我无法执行典型的 Rails 命令 例如rails s and rails c 我发现这种情况发生在某个功能分支上 过去也偶尔发生过 但目前适用于我的develop branch 我逆转了任何 rb可以加载并产生任何效
  • 具有多个数据库的 Rails RSpec

    我运行一个 Rails 应用程序 我们正在将注册流程拆分为一个单独的应用程序 注册应用程序有自己独立的数据库 用于 CMS 和收集潜在客户 但它还需要访问主数据库 使用这个效果非常好ActiveRecord Base establish c
  • gob 恐慌解码接口

    我有一个带有未导出字段的结构 应该对其进行 gob 编码和解码 Say type A struct s int func a A Inc a s 显然在这种情况下我需要实施gob GobEncoder and gob GobDecoder接
  • 动画 gif 无法播放 - 鼠标侦听器 - 鼠标输入事件

    我有一个按钮 我已将其替换为图像 悬停时我希望该图像播放动画 gif 我添加了一个鼠标监听器并输入了将图像更改为 gif 的代码 图像变为gif 然而 gif 并没有动画 我在这个网站上查找过以前的答案 很少但没有一个能够提供帮助 Over
  • 如何在 VS Code 中禁用 C++ 错误检查?

    我正在生成 C 示例代码文件 因此它们有很多固有错误 例如虚构的函数名称 我正在尝试删除文件中的所有错误消息和与错误相关的语法突出显示 我想 C 有一些设置 但我找不到它 打开命令面板 CTRL SHIFT P gt C Cpp 切换错误曲
  • 有没有办法在MonoTouch中制作原生的cocoa类库?

    我知道 MonoTouch 将代码编译为本机机器代码 有没有办法使用 MonoTouch 制作一个本机 a 类库 需要明确的是 我不想在两者之间共享代码 因为我知道这是不可能的 我相信这是可能的 但这将是一项艰苦的工作 而且离收缩包装的开箱
  • FragmentStatePagerAdapter 从 API 27 开始已弃用

    FragmentStatePagerAdapter从 API 27 开始已弃用 替代方案是什么FragmentStatePagerAdapter private class MainPagerAdapter extends Fragment
  • “在上下文或道具中找不到“store””我在尝试简单的react-redux代码时收到此错误

    这是我的书单容器 import React Component from react import connect from react redux class BookList extends Component renderList r
  • 在哪里放置 Windows 窗体项目的中央错误处理程序

    在 ASP NET 中我可以使用Application Error在 global asax 中 以便处理任何未处理的错误 Windows 窗体中有等效的吗 是的 它的 AppDomain UnhandledException using
  • 将 Web 服务添加到已有的 Java 项目中

    我是 Java 新手 我有一个Java项目 它在我的 Windows 7 机器上完美运行 我想将该项目的一些功能用作 Web 服务 以便能够在我的 Silverlight 应用程序中使用它们 Silverlight 应用程序和这个 Java
  • Swift 从 NSDictionary 读取数据

    我正在使用这段代码来读取数据NSDictionary let itemsArray NSArray response objectForKey items as NSArray let nextPageToken String respon
  • 如何对多列进行逆透视 SQL Server

    在我的应用程序中 我使用了商店产品描述值 如下所示 ID BILLNO CUS NAME DATE TOT BAL S1 S2 S3 S4 D1 D2 D3 D4 Q1 Q2 Q3 Q4 U1 U2 U3 U4 T1 T2 T3 T4 TO
  • DFT 频率组件 Opencv

    我使用以下链接来了解如何在Opencv中使用DFT http docs opencv org doc tutorials core discrete fourier transform discrete fourier transform
  • Node Express 发送图像文件作为 API 响应

    我用谷歌搜索了这个但找不到答案 但这一定是一个常见问题 这是同样的问题节点请求 读取图像流 通过管道返回响应 https stackoverflow com questions 17004990 node request read imag
  • Python“if X == Y and Z”语法

    做这个 if key name and item 意思和这个一样 if key name and if key item 如果是这样 我完全困惑了深入 Python 中的示例 5 14 http diveintopython net obj
  • pandas 数据透视表 - 有序类别导致意外的边距

    使用 python 3 7 和 pandas 0 23 4 我正在尝试使用有序分类数据制作数据透视表 如果我包括边距 则小计的顺序似乎不正确 import pandas as pd m male f female data num 0 1
  • 如何在 Xcode 4 中使用 nib 创建自定义 UITableViewCell?

    在 Xcode 3 中 我可以选择在创建表视图单元格子类时创建笔尖 在 Xcode 4 中 它只生成 h m 文件 如何使用 xib 文件创建子类 编辑 参见下面的屏幕截图 EDIT 此外 是否有任何方法可以自动创建 UITableView
  • MySQL 嵌套 JSON 列搜索并提取子 JSON

    我有一个 MySQL 表authors有柱子id name and published books 在这之中 published books是一个 JSON 列 有了样本数据 id name published books 1 Tina 1
  • keydown 事件中的输入验证

    我正在尝试在以下过程中对用户文本输入进行信息验证keydown事件 我试图验证的原因是keydown事件是因为我不想显示那些被认为是非法的字符input开头的盒子 我写的验证是这样的 function validateUserInput v