控制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);
  }
}