如何使输入只读，但仍然允许某些键工作

Question

我有一个输入框。我在其中展示了一些价值。我想将该输入框设置为只读。但是方向键、Home键、End键这些键应该可以用。

我以逗号分隔的方式显示多个网址。我想在这些 URL 之间导航。这就是为什么我需要上面的键应该工作。

我试过 [readonly]="true"，但我无法在输入框中导航。我也不能用disabled。

<input matInput placeholder="Enter Promotional Link URL"  [(ngModel)]="lms.LmPromotionalUrl" name="LmPromotionalUrl">

输出

www.facebook.com,www.google.com,www.cisco.com

有什么方法可以实现这种行为吗？

Answer 1

这是一个简单的 javascript 解决方案，您可以简单地将其适应 HostListener 或 (keydown) angular。基本上我们只是返回 false 并防止任何不是箭头键的键的默认行为（我正在使用 mac 并且不知道哪个主键是，你可以检查 here并将其添加到允许的键码数组中

document.getElementById('foo').addEventListener('keydown', e => {
  if (![37, 38, 39, 40].includes(e.keyCode)) {
    e.preventDefault();
    return false;
  }

})

<input id="foo" placeholder="Enter Promotional Link URL" name="LmPromotionalUrl" value="foo">

在示例中，您仍然可以 "navigate" 使用箭头键浏览值，但不能键入或删除任何内容。

如何使输入只读，但仍然允许某些键工作

How to make input readonly, but still allow some keys to work

angular

angular-material2

angular-material-5