我已經開始了Aurelia項目,並且選擇使用this plugin以使用類似於this post中所見的實現方式爲電話號碼啓用輸入掩碼。jQuery插件僅在Firefox中與Aurelia無關
它可以在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">
我試過刪除模式屬性,並將其更改爲常規文本輸入,無濟於事。我真的在這個問題上撓頭。任何想法或建議將不勝感激。
我不明白。如果我複製代碼,那麼當我將鼠標懸停(或聚焦)到輸入元素上時,會顯示單詞currency,但輸入不可編輯,這意味着它不響應輸入任何值。 –
我認爲這是因爲您確實在您的依賴關係管理器中使用了jquery.inputmask.numeric.js。 以下是我如何使用JSPM(在config.js中的'map'鍵中): '「jquery.inputmask」:「npm:[email protected]」, 「jquery.inputmask.numeric」 :「npm:[email protected] /dist/inputmask/inputmask.numeric.extensions.js」,' – antonmos
我實際上還有其他東西......感謝您的幫助:) –