Aurelia中输入的控制值

Question

我需要在 Aurelia 中创建一个只接受 phone 数字的输入。如果用户在此输入中键入 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';

// 
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;
}

// 
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);
  }
}

Aurelia中输入的控制值

Control value of input in Aurelia

javascript

aurelia