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

控制Aurelia中的输入值

1 个答案: