利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果

假设有这样一个需求：我们需要增强 HTML 里原生的 input 标签，让其达到，随着用户输入字符时，其颜色自动切换的效果。

这是一个典型的可以使用 Angular Directive 实现的需求。

每个 Directive 都有一个 host 元素。

Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive.

Directive 里，修改 @HostBinding 修饰的 Directive 属性，就相当于修改了 DOM 元素的属性本身。

同理，通过 @HostListener 修饰的事件处理函数，在 host 元素发生对应的事件之后，会自动被触发。

Rainbow 指令完整的实现代码：

import { Directive, HostBinding, HostListener } from '@angular/core';@Directive({selector: '[appRainbow]'
})
export class RainbowDirective{possibleColors = ['darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff','mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'];@HostBinding('style.color') color: string;@HostBinding('style.borderColor') borderColor: string;@HostListener('keydown') onKeydown(){const colorPick = Math.floor(Math.random() * this.possibleColors.length);console.log('Jerry colorPick: ' + colorPick);this.color = this.borderColor = this.possibleColors[colorPick];}
}

消费这个指令的方法非常简单：

最后的效果：随着我在 input 字段里输入字段，input 字体颜色自动改变。

完整代码参考我的Github

更多Jerry的原创文章，尽在：“汪子熙”:

利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果相关推荐

Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
一.前言这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发 ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法...
这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发有点像,渐 ...
html email输入框,html5给文本框实现email域名自动完成效果
产品反馈用户总是输错email的域名,因此服务器得到的email的地址是错误的.比如,有许多用户总将xxx@qq.com输入成xxx@qq.con. 这让后端很烦恼,因为这个email地址是合法的,但 ...
限制文本框(TextBox)只能输入数字(VB6代码)
在一些要求只允许输入数值的场合,就用得上了. 基本思路是,先在文本框的keyPress事件里过滤键盘输入,再使用子类化将粘贴剪切等剪贴板操作吃掉. 窗体frmMain.frm内代码(窗体包含一个文本框 ...
js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
JS 控制文本框仅仅能输入数字 <input οnkeyup="value=value.replace(/[^0-9]/g,'')"οnpaste="value=v ...
混合开发的坑(7) ---输入文本时，键盘遮挡
CSS绝对定位于底部,输入文本时,键盘遮挡问题. 浏览器正确 ios 正确 anroid 会遮挡只能通过js来解决转载于:https://www.cnblogs.com/huangqiao/ ...
js 只准输入数字_js实现文本框只允许输入数字并限制数字大小的方法
本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消 ...
限制文本框中只能输入数字(+,-)的正则表达式写法
最近由于项目要求,要限制文本框中只能输入数字,在网上翻查了许多资料,但符合项目实际要求的比较少. 据分析总结得以下代码,经测试在IE6.0+,ff,chrome下有效: <input type= ...
Android Studio基础输入文本框EditText
Android Studio基础输入文本框EditText 接续上一节<Android Studio 基础按钮使用> 1.提示文本框.输入文本框,在布局xml编写 <EditText ...

利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果

利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果相关推荐

最新文章

热门文章