Aurelia的輸入控制值

Question

我需要在Aurelia中創建一個只接受電話號碼的輸入。如果用戶在該輸入中輸入1234567890，則應該顯示(123) 456-7890，並將綁定變量設置爲1234567890。如果用戶輸入(123) 456-7890，結果應該是相同的。如果用戶在輸入中鍵入字母，則輸入不應該顯示該字母，也不應該更新綁定的JavaScript變量。

我能夠這樣使用ValueConverter部分實現：

phone.ts

export class PhoneValueConverter { 
    private removeNonDigits(input) { 
     let digits = ''; 

     // Remove non-digits. i.e. '(', ')', ' ' and '-' 
     for (let i = 0; i < input.length; i++) { 
      let char = input.charAt(i); 

      if ('0' <= char && char <= '9') 
       digits += char; 
     } 

     return digits; 
    } 

    toView(value) { 
     if (!value) 
      return value; 

     value = this.removeNonDigits(value); 

     let formatted = '(' + value.substring(0, 3); 

     if (value.length >= 3) 
      formatted += ') ' + value.substring(3, 6); 
     if (value.length >= 6) { 
      // Don't place an upper limit, otherwise the user would not 
      // see the entire value 
      formatted += '-' + value.substring(6); 
     } 

     return formatted; 
    } 

    fromView(value) { 
     let digits = this.removeNonDigits(value); 

     // Only accept a 9-digit phone number 
     return digits.substring(0, 10); 
    } 
} 

app.html

<template> 
    ${PhoneNumber} <br> 
    <require from="phone"></require> 
    <input value.bind="PhoneNumber | phone"> 
</template> 

這工作完全在迫使PhoneNumber始終爲0-9數字。如果用戶在輸入中鍵入一個字母或第10位數字，它將不會被添加到PhoneNumber - 正如預期的那樣。但不幸的是，輸入值（$('input').value()，而不是value.bind）仍將包含額外的錯誤字符。

在控制哪些字符被添加到輸入值中是否存在Aurelia約定？

Answer 1

您可以訂閱輸入的keydown事件，並在其不想出現在輸入中的字符時阻止默認操作。

下面是使用這種方法來建立一個非常簡單的數字輸入的例子：https://gist.run?id=3101e8f73cf4da32445505d0e4258f01

app.html

<template> 
    <require from="./numeric-input"></require> 

    <numeric-input value.bind="value"></numeric-input> 

    ${value} 
</template> 

app.js

export class App { 
    value = ''; 
} 

數字-input.html

<template> 
    <input type="text" value.bind="value" placeholder.bind="placeholder"> 
</template> 

數字-input.js

import { 
    inject, 
    bindable, 
    bindingMode 
} from 'aurelia-framework'; 

// http://stackoverflow.com/a/995193/725866 
function isNavigationOrSelectionKey(e) { 
    // Allow: backspace, delete, tab, escape, enter and . 
    if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 || 
    // Allow: Ctrl+A/X/C/V, Command+A/X/C/V 
    ([65, 67, 86, 88].indexOf(e.keyCode) !== -1 && (e.ctrlKey === true || e.metaKey === true)) || 
    // Allow: home, end, left, right, down, up 
    (e.keyCode >= 35 && e.keyCode <= 40)) { 
    // let it happen, don't do anything 
    return true; 
    } 
    return false; 
} 

// http://stackoverflow.com/a/995193/725866 
function keydown (e) { 
    if (isNavigationOrSelectionKey(e)) { 
    return; 
    } 
    // If it's not a number, prevent the keypress... 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
    e.preventDefault(); 
    } 
} 

@inject(Element) 
export class NumericInput { 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value; 
    @bindable placeholder = ''; 

    constructor(element) { 
    this.element = element; 
    } 

    attached() { 
    this.element.addEventListener('keydown', keydown); 
    } 

    detached() { 
    this.element.removeEventListener('keydown', keydown); 
    } 
}