角度指令忽略非数字输入

2024-05-13

我必须为 IE8 编写一些代码。我有一个 ng-repeat 创建一个表,其中包含:

<input production-qty type="text" class="input-mini" maxlength="3" ng-model="day.qtyA" ui-event="{ blur : 'updateProduction(day)' }" ng-disabled="day.type=='H'">

IE8 不会执行 type=number

我想要一个指令,该指令将忽略该输入字段上非数字键的击键....即....0 - 9

我不想让用户输入 abc 并污染模型,然后告诉他们该值无效。我不想让他们输入任何原本无效的数据。


HTML:

<input production-qty type="text" maxlength="3" ng-model="qty1">

指示:

app.directive('productionQty', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^0-9]/g, '');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;  // or return Number(transformedInput)
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

Plunker http://plnkr.co/edit/cXew2Ln3rOuSon23Mmuk?p=preview

也可以看看对输入中的 ng-model 进行过滤 https://stackoverflow.com/questions/14419651/angularjs-filters-on-ng-model-in-an-input。我上面的答案是根据 pkozlowski.opensource 的答案建模的。

我查看了 ng-pattern,但它没有过滤文本框中显示的内容。它设置$scope.qty1 to undefined,但不需要的字符在文本框中可见。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

角度指令忽略非数字输入 的相关文章

  • 如何使用 LinkedIn javascript sdk 检索包括所有字段的职位列表?

    我想要获取 LinkedIn 会员在其个人资料中输入的每个职位的 ID 头衔 摘要 开始日期 结束日期 当前状态和公司名称 我测试了一个查询休息控制台 https apigee com console linkedin我得到了想要的结果 查
  • 如何根据按钮单击折叠和展开 Kendo UI 树视图中的所有树节点?

    这是行不通的 您可以使用此代码 1 崩溃 折叠kendoTree查看文档 http docs kendoui com api web treeview methods collapse treeview kendoTreeView var
  • 如何使用 axios / jest 测试失败的请求

    我创建了一个非常小的应用程序 如果您传递硬币和数量 它可以计算为某些加密货币支付的总价格 我想测试错误 但我总是收到 收到的承诺已解决而不是被拒绝 我相信这是因为如果 url 错误 axios 仍然会解决承诺 我遇到的第二个问题是 我尝试测
  • 使用闭包和自调用函数制作计数器

    我想知道为什么这段代码不起作用 var uniqueInteger function var counter 0 return function return counter console log uniqueInteger 0 cons
  • 通知用户消息仍在输入中

    我正在使用 Laravel 5 6 7 Socket IO 和 vue js 我没有使用 Pusher 和 redis 下面是我的代码 用于向与我一对一聊天的用户发送消息 var url http localhost 6001 apps M
  • 来自 DataURL 的 Blob?

    Using FileReader s readAsDataURL 我可以将任意数据转换为数据 URL 有没有办法将数据 URL 转换回Blob使用内置浏览器 API 的实例 用户 Matt 一年前提出了以下代码 如何在javascript中
  • Three.js - 在代码中包含网格数据

    我有这个 Three js 代码 其中 JSON 加载器从文件 models mountain json 加载网格 var Three new function this scene new THREE Scene this camera
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • jQuery Blur() 在 Chrome 上不起作用

    我在 MacOSX 上运行这个http jsfiddle net q84wv http jsfiddle net q84wv on Chrome最新版本 它不会工作 在 Firefox 上运行时它工作得很好 有什么线索吗 假设您想要aler
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 引入 V8 后,Google Apps 脚本无法为其他用户完全执行

    我编写了一个脚本 得到了这里好心人的大力帮助 该脚本使用 Google Sheets 脚本复制 Google Drive 上的文件夹 和内容 它运行了很长一段时间 但后来我启用了 V8 引擎 现在已禁用 问题是 它仍然适用于我 也许还有其他
  • ReactJS:从没有 onChange 事件的 props 中选择默认值?

    所以 我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序 我有一个道具传递我想要选择的选项的默认值 如果我有的话 它就没有问题
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • Window 与 Var 声明变量[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中使用 var 和不使用 var 的区别 https stackoverflow com questions 1470488 difference between using v
  • RTCDataChannel发送方法不发送数据

    我的 RTCDataChannel 遇到一个奇怪的问题 我正在对 WebRTC 进行一些研究 并且已经可以进行 WebRTC 音频 视频聊天 现在我想使用 RTCDataChannel 添加文本聊天和文件共享 我已经像这样创建了 RTCDa
  • 常规 JavaScript 可以与 jQuery 混合使用吗?

    例如 我可以采用这个脚本 来自 Mozilla 教程 https developer mozilla org en Canvas tutorial Basic usage
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性

随机推荐

  • RecyclerView 不调用 onCreateViewHolder 或 onBindView

    没有收到任何错误 所有数据似乎都有效 由于某种原因 没有调用与视图相关的方法 我已确定以下事项 getItemCount 是唯一被调用的适配器方法 并且返回一个正整数值 我知道这将是你们将要查看的区域 构造函数正在被调用 成员变量有效 Pa
  • 设置 Silex Bootstrap 时出现 Apache 错误:无法检查 htaccess 文件

    我正在尝试使用 Silex Bootstrap 建立一个网站 我已将它与其他 Web 项目一起放在我的文件夹中 并更改了 Apache 配置中的 DocumentRoot
  • 将 scanf 与 NSString 一起使用

    我希望用户输入一个字符串 然后将输入分配给 NSString 现在我的代码如下所示 NSString word scanf s word The scanf http www cplusplus com reference clibrary
  • 如何在 Xcode 10 中恢复快速帮助?

    在我升级到 Xcode 10 后 快速帮助信息仅提供所选类或结构的声明 是否有某个设置可以使其与 Xcode 9 中的设置相同 升级后我遇到了同样的问题 其中函数签名是单击选项时唯一显示的内容 当我删除里面的所有内容后 快速帮助再次出现 L
  • Docker-compose:npm 安装成功后卷中不存在 node_modules

    我有一个具有以下服务的应用程序 web 在端口 5000 上保存并运行 python 3 Flask Web 服务器 使用 sqlite3 worker 有一个index js文件是队列的工作人员 Web 服务器通过端口使用 json AP
  • 将 Python 3 与 AWS lambda 结合使用

    可以在 lambda 中使用使用 Python3 构建的应用程序 而不仅仅是 python2 7 可能会考虑周围的选择 https gun io blog announcing zappa serverless python aws lam
  • 我可以以某种方式“编译”一个Python脚本以在没有安装Python的PC上运行吗?

    所以我有一个Python脚本 myscript py 我是这样执行的 python D myscript py 但是 我必须安装 Python 并将其包含在PATH使其工作的环境变量 是否有可能以某种方式将 Python 可执行文件与 Py
  • 如何向 SvelteKit/Vite 应用添加版本号?

    我正在尝试在我的 SvelteKit 应用程序中创建一个系统 它会在某个页面上向您显示有关当前应用程序版本的信息 最好是 Git 提交哈希和描述 我尝试使用Vite的定义功能 https vitejs dev config define在构
  • Android On Focus Listener 和 On Click Listener on ImageView

    我有一个 imageview 它具有两个属性 可聚焦的 and 可聚焦触摸模式 set to true
  • 如何解释 mgcv 的随机效应图

    我有一些关于在 GAM 中使用随机效果的问题 首先 您如何解释和传达输出图 我在这个 GAM 中将火灾建模为随机效应 因为它在我的不同现场站点上很大程度上是随机发生的 并且我只将其记录为二进制 它不能作为普通变量工作 因为它的级别太少 而且
  • Cakephp - CSRF 令牌不匹配

    我在 Cakephp 3 6 中有一个项目 其中 MessageController 中的 3 个操作由 Ajax 调用 但是 我有一个问题 当我向其中一个操作发送请求时 XHR 会向我返回以下内容 message CSRF token m
  • 带有 .htaccess 的漂亮网址?

    我刚刚创建了一个新的 WordPress 页面模板 在其中运行一些 php mysql 脚本 我想对其子页面应用 mod 重写 例如我生成了以下链接 http www quotist com quotes by authors html l
  • 首选项和操作栏中的开/关切换按钮 - 冰淇淋三明治风格

    我指的是 ICS 手机上默认 Android 设置应用程序中看到的蓝色开 关样式 也可以在这里看到 http android developers blogspot com 2012 02 android design v2 now wit
  • java中的回调是什么[重复]

    这个问题在这里已经有答案了 可能的重复 什么是回调函数 https stackoverflow com questions 824234 what is a callback function 我已经阅读了回调的维基百科定义 但我仍然没有明
  • 如何将十六进制字符串转换为十进制值

    我尝试将十六进制字符串转换为十进制值 但它没有给我预期的结果 I tried convert toint32 hexa 16 convert todecimal hexa 我有一个看起来像这样的字符串 1 12 94 201 198 我把它
  • 按下按钮即可持续移动

    我按照在线教程制作了一个贪吃蛇游戏 并需要一些帮助来进行一些更改 截至目前 holding向左或向右箭头键将使蛇移动 它能让蛇向左或向右移动吗只需轻按一下按钮所以用户不必按住箭头键 question True while not gameE
  • 获取 Promise 的值并分配给变量

    utility fetchInfo 返回一个 Promise 对象 我需要能够获取此 Promise 对象的值 并将其值分配给一个变量 以便稍后在我的代码中使用 此刻 我可以愉快地打印出result到控制台 但我需要能够将此值分配给myVa
  • 重载逻辑运算符 && 和 ||从 C++17 开始短路?

    我读到http en cppreference com w cpp language operators http en cppreference com w cpp language operators 布尔逻辑运算符 运算符 和运算符
  • 如何将存储过程中的值返回到 EF

    我试图通过 EF 调用存储过程并从存储过程中检索返回值 我用过this https stackoverflow com questions 6861737 executesqlcommand with output parameter an
  • 角度指令忽略非数字输入

    我必须为 IE8 编写一些代码 我有一个 ng repeat 创建一个表 其中包含