Aurelia中的输入控制值 [英] Control value of input in Aurelia

问题描述

我需要在Aurelia中创建一个仅接受电话号码的输入.如果用户在此输入中键入1234567890，它将显示[phone]，并且绑定变量将设置为1234567890.如果用户在输入中也键入[phone]，则结果应相同.如果用户在输入中输入字母，则输入不应显示字母，也不应更新绑定的javascript变量.

I need to create an input in Aurelia that only accepts a phone number. If the user types 1234567890 into this input it should display [phone] and the bound variable would be set to 1234567890. The result should be the same if the user types [phone] into the input as well. If the user types a letter into the input, the input should not display the letter, nor should the bound javascript variable get updated.

我可以使用ValueConverter来部分实现这一目标:

I'm able to partially achieve this using a 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)仍将包含额外的错误字符.

This works perfectly in forcing PhoneNumber to always be 0-9 numerical digits. If the user types a letter, or a 10th digit, into the input, it will not be added to PhoneNumber - just as expected. But unfortunately, the value of the input ($('input').value(), not value.bind) will still contain the extra, incorrect character.

在控制将哪些字符添加到输入值中是否有Aurelia约定?

Is there an Aurelia convention in controlling what characters get added to the value of the input?

推荐答案

您可以订阅输入的keydown事件，并在不希望其出现在输入中的字符时阻止默认操作.

You can subscribe to the input's keydown event and prevent the default action when it's a character you don't want to appear in the input.

以下是使用此方法构建非常简单的数字输入的示例: https://gist.run?id=3101e8f73cf4da32445505d0e4258f01

Here's an example of using this approach to build a very simple numeric input: 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 = '';
}

numeric-input.html

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

numeric-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中的输入控制值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！