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)。基本上我们只是返回false并防止任何不是箭头键的键的默认行为（我使用mac并且不知道哪个主键是，你可以检查{{3并将其添加到允许的密钥代码数组

＆＃13;

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

＆＃13;

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

＆＃13;

在示例中，您仍然可以＆＃34;导航＆＃34;使用箭头键通过值，但无法输入或删除任何内容。

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

1 个答案: