首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在angular 1.5中,退格键不会触发ng-change / ng-keyup,它会删除文本框中的最后一个字符

在Angular 1.5中,退格键不会触发ng-change/ng-keyup事件,而是直接删除文本框中的最后一个字符。这是因为ng-change/ng-keyup事件是在输入框的值发生改变时触发的,而退格键只是修改了输入框的值,并没有触发值的改变事件。

解决这个问题的方法是使用ng-keydown事件来监听退格键的按下。ng-keydown事件在按下键盘上的任意键时触发,包括退格键。通过在ng-keydown事件的处理函数中判断按下的键是否是退格键,然后手动处理删除操作。

以下是一个示例代码:

代码语言:txt
复制
<input type="text" ng-model="text" ng-keydown="handleKeyDown($event)">
代码语言:txt
复制
$scope.handleKeyDown = function(event) {
  if (event.keyCode === 8) { // 退格键的keyCode是8
    event.preventDefault(); // 阻止默认的删除操作
    $scope.text = $scope.text.slice(0, -1); // 手动删除最后一个字符
    $scope.$apply(); // 手动触发Angular的脏检查
  }
};

在上面的代码中,我们通过ng-keydown指令将输入框的按键事件绑定到handleKeyDown函数上。在handleKeyDown函数中,我们判断按下的键的keyCode是否是退格键的keyCode,如果是,则阻止默认的删除操作,然后手动删除输入框中的最后一个字符,并通过$scope.$apply()手动触发Angular的脏检查,以更新视图。

这样,当用户按下退格键时,就能正确地删除文本框中的最后一个字符了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性、可靠的云服务器,适用于各种应用场景。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于海量数据存储和分发。详情请参考:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

让更多后端程序员更好了解学习Angualr,拓展自己技术栈。 Angular简介:   Angular一个应用设计框架与开发平台,用于创建高效、复杂、精致单页面应用。...Angular 会把这个名字替换为响应组件属性字符串值。...first返回当前列表项是否为第一个 last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数,通常用在增加样式用来区分行与行之间 odd返回当前列表项index是否为奇数 <ul...ng-if判断使用: //angular没有else只能都通过ng-if来判断 准备 进行...ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素 innerHTML 到应用程序数据,并移除 HTML 字符危险字符 ng-bind-template

5.3K41
  • Angularjs基础(十)

    AngularJS ng-change 指令指令不会覆盖原生 onchange 事件, 如果触发该事件,ng-change 表达式与原生 onchange 事件都会执行。         ...ng-change 事件每次改变时触发,它不需要等等一个完成修改过程或等待失去焦点动作         ng-change 事件只针对输入框值真实修改,而不是通过JavaScript 来修改...ng-class 指令值可以是字符串,对象,或一个数组。             如果是字符串,多个类名使用空格分隔。             ...ng-class-even 指令建议使用 表格样式渲染,但是所有HTML 元素都是支持。           ...ng-class-odd 指令建议使用 表格样式渲染,但是所有HTML 元素都是支持

    3.3K50

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    2.4、ng-change ng-change属性来指定一个控制器方法,变化时触发 当用户改变输入时计算给出表达式。...表达式会被立即计算,不像 JavaScriptonchange事件只会在最后一次改变时触发(通常,当用户离开表单元素或按回车时)。当值变化来自于模型时,不会对表达式进行计算。...上面的做法有一个潜在问题,只有当用户文档框输入值时候我们才会去计算,如还有更多输入框,每一个输入框都要绑定。 $scope....如果表达式结果为一个数组,则数组每个元素为使用空格分隔一个或多个类名字符串。 如果表达式结果为一个对象,对象每个key-value如果键值为真时则键名作为类名。...5位后1个元素,返回被删除元素 console.log("被删除:"+len+"——"+array31); 运行结果: 4.4、删除 移除最后一个元素并返回该元素值 arrayObj.pop

    15.3K100

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    要注意$scope是否存在该模型,如果有则会初始化数据。 2.4、ng-change ng-change属性来指定一个控制器方法,变化时触发 当用户改变输入时计算给出表达式。...表达式会被立即计算,不像 JavaScriptonchange事件只会在最后一次改变时触发(通常,当用户离开表单元素或按回车时)。当值变化来自于模型时,不会对表达式进行计算。...2.5、$watch 用于监视对象变化,可以获得变化前值与变化后值。 上面的做法有一个潜在问题,只有当用户文档框输入值时候我们才会去计算,如还有更多输入框,每一个输入框都要绑定。...如果表达式结果为一个数组,则数组每个元素为使用空格分隔一个或多个类名字符串。 如果表达式结果为一个对象,对象每个key-value如果键值为真时则键名作为类名。...4.4、删除 移除最后一个元素并返回该元素值 arrayObj.pop(); 移除最前一个元素并返回该元素值,数组中元素自动前移 arrayObj.shift();  删除从指定位置deletePos开始指定数量

    12.6K30

    【js】Input事件

    当用户按下/释放键盘上任意触发 3 event.keyCode,返回键盘上按键对应特定键码 (兼容性:分号Firefox,Opera上返回是ASCII码,IE,Safari上返回键码)...4 event.charCode = 0 这两个事件触发时,总返回0 keypress 1 全部浏览器支持 2 当用户按下字符触发 3 event.charCode,返回键盘上按键对应ASCII码...支持,别的浏览器不支持 2 文本插入文本框之前触发,便于检查拦截用户输入使用 3 input:text,input:password,input:search,textarea以及元素是contentEditable...,textarea支持触发此事件,在内容变化时,实时触发 (与onchange事件类似,但是onchange事件只有元素失去焦点时候才触发) 4 IE9此事件有bug,多种删除方式(使用退格(...Backspace),删除(Delete),Ctrl+X,右键菜单剪切和删除不会被实时触发 5 IE9种需要使用addEventListener绑定事件,而attachEvent绑定事件方式不可用

    10.3K30

    AngularJS中使用表单输入应用设计

    Angular中使用表单元素非常方便。正如我们在前面几个例子中看到,你可以使用ng-model属性把元素绑定到你模型属性上。...同时,一开始时候我们会把文本框默认值设置为0: 但是,以上代码所采取策略有一个潜在问题,即,只有当用户文本框输入值时候我们才会去计算所需金额。...下面运用这一技术重写StartUpController: 但是,以上代码所采取策略有一个潜在问题,即,只有当用户文本框输入值时候我们才会去计算所需金额。...下面运用这一技术重写StartUpController: 请注意,需要监视表达式位于引号。是的,它是一个字符串。这个字符串会被当作Angular表达式来执行。...我们还可以监视一个函数返回值,但是监视funding.startingEstimate属性是没有用,因为这个值算出来是0,也就是它初始值,而且这个值永远不会发生变化。

    2.1K60

    走进AngularJs(二) ng模板中常用指令使用方式

    也可以标记中使用表达式,如{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。框架内部,字符不会简单使用eval()来执行,而是有一个专门$parse服务来处理。...ng表达式不可以使用循环语句、判断语句,事实上模板中使用复杂表达式也是一个不推荐做法,这样视图与逻辑就混杂在一起了。...这个用来表格实现隔行换色再方便不过了。 2. ng-style   ng-style用来绑定元素css样式,其表达式返回值为一个js对象,为css样式名,值为该样式对应合法取值。...DOM指令、过滤器等;   8) 使用ng-init指令,将作用域中变量进行替换;   9) 最后生成了我们最终视图。   ...为了避免这个,ng中有一个与{{}}等同指令:ng-bind,同样用于单向绑定,页面刚加载时候就不会显示出对用户无用数据了。

    2.9K20

    表单脚本

    ,那么相应表单控件拥有焦点情况下,按回车就可以提交表单。...(textarea除外,文本区回车会换行)。如果表单没有提交按钮,安回车不会提交表单。 注意,通过上述方式提交表单,浏览器会在将请求发送给服务器之前触发submit事件。...(1)单行文本框 通过设置size特性,可以指定文本框能够显示字符数;通过设置value特性,可以指定文本框初始值;通过设置maxlength特性,可以指定文本框可以接受最大字符数。 <!..., 要选择最后一个字符索引) 注意要看到被选择文本,必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。...移动和重排选项 DOMappendChild方法(只能添加到最后),如果appendChild传入一个文档已有的元素,那么就会先从该元素父节点中移除它,再把它添加到指定位置。

    4.8K41

    JavaScript 表单处理

    原因很简单,对value属性修改,不一定会反映在DOM。 除了value值,还有一个属性对应是defaultValue,可以得到原本value值,不会因为值改变而变化。...} } PS:有一个最大问题,就是IE触发select事件时候,选择一个字符后立即触发,而其他浏览器是选择想要字符释放鼠标后才触发。...退格删除等无法使用。...部分浏览器比如Firfox,需要解放这些,而非字符触发编码均为0;Safari3之前浏览器,也会被阻止,而它对应字符编码全部为8,所以最后就加上charCode > 8判断即可。...规定,add()两个参数是必须,如果不确定索引,那么第二个参数设置null即可,即默认移入最后一个选项。

    4.8K101

    Angularjs基础(十一)

    ng-cut指令指令不会覆盖元素原始oncut事件,事件触发时,ng-cut表达式与原始oncut 事件都会执行。         ...ng-dblclick 指令指令不会覆盖元素原始 ondblclick 事件, 事件触发时,ng-dblclick 表达式与原始 ondblclick 事件将都会执行。         ...ng-include         描述:应用包含移除HTML元素。           ...ng-init 指令添加一些不必要逻辑到 scope ,建议你可以控制器 ng-controller 指令执行它 。             ...{{count}}         定义和用法 :ng-keyup 指令用于告诉 AngularJS 指定 HTML 元素上按键松开时需要操作。

    2.3K50

    AngularDart Material Design 输入 顶

    如果为真,则它会“漂浮”输入之上。 hintText String  要在输入上显示提示。 如果输入上有错误消息,则不会显示此文本。...如果没有文本框输入任何内容,则显示默认文本。当用户输入文本时,它会消失。...如果为真,则它会“漂浮”输入之上。 hintText String  要在输入上显示提示。 如果输入上有错误消息,则不会显示此文本。...如果没有文本框输入任何内容,则显示默认文本。当用户输入文本时,它会消失。 maxCount int  字符计数输入框允许最大字符数。...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择一个选定值选项中有效       2.如果选择没有选定值,则选项没有任何活动 inputText String

    5.3K40

    vim 从嫌弃到依赖(6)——插入模式

    S 删除光标所在行并进入模式 c + motion 删除指定范围字符,并进入插入模式 C 删除光标所在位置至行尾字符,并进入插入模式 插入模式删除字符 插入模式输入出错,...其实在插入模式是可以进行删除操作,例如如果要删除字符刚好在光标前面,我们可以使用退格删除它。...另外vim提供了其他几种方式插入模式向前删除单词、行 : 删除光标前一个词(与退格相同) : 删除光标前一个单词 : 删除至行首 插入-...假设我写文档或者写代码时候光标已经到窗口最后一行了,但是我想将光标定位到窗口中央,一般都会先退回到普通模式,然后使用前面介绍过 zz来完成这一动作,最后再进入插入模式。...替换模式 vim 替换模式与改写模式类似。它会将光标所在字符替换为新输入字符,按照 vim官方文档说法,替换模式不会变更文本自身长度,只会在现有长度上替换已有文本。

    56140

    Vue基础:条件渲染、列表渲染、事件处理

    v-if 是“真正”条件渲染,因为它会确保切换过程条件块内事件监听器和子组件适当地被销毁和重建。...但是,添加到对象上新属性不会触发更新。...事件修饰符 事件处理程序调用 event.preventDefault() 或 event.stopPropagation() 是非常常见需求。....stop:阻止单击事件冒泡 .prevent:禁止默认行为 .capture:使用事件捕获模式 .self:只当事件该元素本身(比如不是子元素)触发触发回调【不接受冒泡上来事件】 .once:点击事件将只会触发一次...修饰符 说明 .enter 捕获 “回车” .tab 捕获 “Tab” .delete 捕获 “删除” 和 “退格 .esc 捕获 “Esc” .space 捕获 “空格” .up

    1.9K41

    angularjs中常用ng指令介绍【转载】

    也可以标记中使用表达式,如{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。框架内部,字符不会简单使用eval()来执行,而是有一个专门$parse服务来处理。...ng表达式不可以使用循环语句、判断语句,事实上模板中使用复杂表达式也是一个不推荐做法,这样视图与逻辑就混杂在一起了。...这个用来表格实现隔行换色再方便不过了。 2.  ng-style ng-style用来绑定元素css样式,其表达式返回值为一个js对象,为css样式名,值为该样式对应合法取值。...8) 使用ng-init指令,将作用域中变量进行替换; 9) 最后生成了我们最终视图。...为了避免这个,ng中有一个与{{}}等同指令:ng-bind,同样用于单向绑定,页面刚加载时候就不会显示出对用户无用数据了。

    1.9K30

    程序员必知必会那些邪恶脚本

    猥琐制表符(tab) 当你想用制表符来个自动补全时,你会它非但不干,而且还删除一个字母,不信邪你使劲多砸了几个制表符,这下好了,更多字符删除了。...tset -Qe $'\t'; 原来是将制表符定义为退格了。 学习课堂: tset 用于设置终端特征;-e 参数设置擦除字符,缺省为退格字符;-Q 表示不显示设置信息(静默)。 3....我默默地输入了 eject, 同事愕然眼光不带走一丝云彩轻轻地离开。...当你输入了一个命令之后,用小指轻轻地、优雅地,按下右侧那个小小回车,满心以为会爆发出绝世高手风范。然而……并没有,非但没有,你输入命令还被删除一个字符!...,所触发 ASCII 码是 0x7F,即“退格”。也就是说,你按下回车,会被映射为退格

    97870

    8-angular 要点温习-1

    angualr 要点温习 1、一些 ng 指令 ng-disabled true|false ,规定一个元素是否被禁止,但不会为隐藏 ng-keydown/ng-keypress/ng-keyup ng-mousedown...isNaN($scope.myInput); angular.isObject() 如果引用是对象返回 true angular.isString() 如果引用字符串返回 true angular.isUndefined...() 如果引用未定义返回 true angular.equals(a,b) 如果两个对象相等返回 true *angular.fromJson() 反序列化 JSON 字符串 *angular.toJson...() 序列化 JSON 字符串 3、创建多个 ng-app angular 自承认第一个 ng-app,通过 var app =angular.module("myApp",[]);即可获它操作权...> 复制代码 4、怎么 angular 架构创建编译元素 添加新元素则需要通过编译实现,编译目的在于让添加脚本代码支持ng-?

    3.3K40

    AngularJS 事件机制是什么样?如何使用它来实现交互功能?

    基本概念在 AngularJS ,事件发生时会触发一个特定动作或函数,这些动作或函数被称为事件处理器(Event Handlers)。...ng-submitng-submit 事件表单上绑定提交事件。当用户表单按下"Enter"或点击提交按钮时,与该事件相关联表达式或函数将会被执行。...使用控制器函数点击我控制器定义一个名为 incrementCount() 函数,并在上述代码绑定到 ng-click...当一个元素上绑定了多个事件处理器时,点击该元素会触发所有绑定处理器。可以使用 stopPropagation 修饰符阻止事件进一步传播。...当点击按钮时,仅会触发 innerHandler() 函数,而不会触发 outerHandler() 函数。

    21020

    Angular 伪事件

    尽管 Angular 模版绑定文档中提到了伪事件 pseudo-event,但是在其他地方没有进一步文档说明。深入之前,我们看看 Angular 伪事件解决了什么问题。...如下,是一个关于怎么模版声明伪事件例子: <input (keydown.esc) ='.....比如,下面的案例将<em>不会</em>起作用,因为组合<em>键</em>只是由字母组成: 第二,非组合<em>键</em>必须放在组合<em>键</em><em>的</em><em>最后</em>定义。...下面是<em>一个</em>正确<em>的</em>放置案例,因为非修饰<em>键</em> Z 放在<em>最后</em>定义: 相比之下,下面这个例子<em>中</em>修饰<em>键</em>放置<em>的</em>位置不对....'/> 不幸是,Angular 伪事件大多数字符(如减号,等号,斜杆,左括号,右括号,反向号等)上仍然缺乏这种映射。由于它们是符号,这导致非常差可读性,有时候会破坏绑定本身。

    26640
    领券