我已经启动了Aurelia项目,并且我选择使用this plugin来启用电话号码的输入屏蔽,其实现类似于this post中的实现。
它在Chrome和Safari中运行良好 - 但是,它只是简单的在Firefox中不起作用。没有错误或其他有用的信息。上面链接的演示页面上的示例工作正常,但是我确信它必须与我的实现有关:
JS:
import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, ValidationRules, validateTrigger} from 'aurelia-validation';
import 'igorescobar/jQuery-Mask-Plugin'
@inject(NewInstance.of(ValidationController))
export class MyForm {
async activate(params, routeConfig) {
// do stuff if there are route parameters
}
bind() {
$('#PhoneNumber').mask('(000) 000-0000');
}
constructor(controller) {
this.controller = controller;
this.controller.validateTrigger = validateTrigger.manual;
}
submit() {
this.controller.validate()
.then(errors => {
if (errors.length === 0) {
// do a thing
} else {
// do something else
}
});
}
}
ValidationRules
.ensure('phoneNumber').displayName('Phone number')
.minLength(10).withMessage('Phone number must be at least 10 characters')
.maxLength(14).withMessage('Phone number is too long')
.matches(/[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}/).withMessage('Please provide a valid phone number')
.on(MyForm);
HTML
<input class="form-control" id="PhoneNumber" type="tel" minlength="10" maxlength="14" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" value.bind="phoneNumber & validate" required="required">
我已经尝试删除模式属性并将其更改为常规文本输入,但无济于事。我真的在这个问题上摸不着头脑。任何想法或建议将不胜感激。
答案 0 :(得分:2)
我和Jan一起工作 - 我们从来没有像原始问题编码那样让它在Firefox中工作。
我们最终用jquery.inputmask替换它,因为我们遇到了与jquery.mask(&#39; igorescobar / jQuery-Mask-Plugin&#39;)的兼容性问题。
这是使它工作的胶水(基于Two-Way binding in an Aurelia Custom Attribute):
<强>输入mask.js 强>
import {inject, customAttribute, bindable, bindingMode} from 'aurelia-framework';
import 'jquery.inputmask';
import 'jquery.inputmask.numeric';
@customAttribute('input-mask')
@inject(Element)
export class InputMaskCustomAttribute {
@bindable({defaultBindingMode: bindingMode.twoWay}) unmaskedValue;
@bindable maskOptions;
element;
isValidInputElement;
// The maskedinput jquery pluggin does not allow the events that aurelia needs
// for binding to get through. So we will manually put them through.
// This is the list of events we are going to look for. "focusout" allows for the value
// to be correct intime for "onblur".
aureliaBindEvents = 'focusout';
eventTarget = undefined;
constructor(element) {
if (element instanceof HTMLInputElement) {
this.element = element;
this.isValidInputElement = true;
this.eventTarget = $(this.element);
} else {
this.isValidInputElement = false;
}
}
bind() {
this.element.value = this.unmaskedValue;
}
attached() {
this.setupMask();
}
detached() {
this.tearDownMask();
}
maskOptionsChanged(newValue, oldValue) {
this.tearDownMask();
this.setupMask();
}
setupMask(mask) {
if (this.isValidInputElement && this.maskOptions) {
this.eventTarget.inputmask(this.maskOptions);
this.eventTarget.on(this.aureliaBindEvents, (e) => {
this.unmaskedValue = this.eventTarget.inputmask('unmaskedvalue');
this.fireEvent(e.target, 'input');
});
}
}
tearDownMask() {
if (this.isValidInputElement) {
if (this.eventTarget) {
this.eventTarget.off(this.aureliaBindEvents);
this.eventTarget.inputmask('remove');
}
}
}
createEvent(name: string) {
let event = document.createEvent('Event');
event.initEvent(name, true, true);
return event;
}
fireEvent(element: HTMLElement, name: string) {
var event = this.createEvent(name);
element.dispatchEvent(event);
}
}
<强> widget.html 强>
<require from="input-mask"></require>
<input class="form-control" type="text" maxlength="12"
input-mask="mask-options.bind: {alias: 'currency', rightAlign: false, allowMinus:false, allowPlus: false}; unmasked-value.bind: target['monthly-payment'] & validate" />
答案 1 :(得分:0)
您可以在attached()
事件上使用jquery命令(在html呈现之后),而不是在bind()
上。试试这个:
attached() {
$('#PhoneNumber').mask('(000) 000-0000');
}