jQuery插件仅在Firefox中与Aurelia无关

Question

我已经开始了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"> 

我试过删除模式属性，并将其更改为常规文本输入，无济于事。我真的在这个问题上挠头。任何想法或建议将不胜感激。

Answer 1

我和Jan一起工​​作 - 我们从来没有在Firefox中以原始问题编码的方式工作。

因为我们遇到了与jquery.mask（'igorescobar/jQuery-Mask-Plugin'）的兼容性问题，我们最终将其替换为jquery.inputmask。

下面是使它工作（基于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" /> 

Answer 2

您可以在attached()事件（在html呈现之后）上使用jquery命令，而不是在bind()上使用jquery命令。试试看：

attached() { 
    $('#PhoneNumber').mask('(000) 000-0000'); 
}