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

Question

I have one input box. I am showing some value in it. I want to make that input box as read-only. But arrows key, Home key, End key these keys should work.

I am showing multiple URLs by comma separated way. I want to navigate between these URLs. That's why I need above keys should work.

I tried with [readonly]="true", but I cant navigate within input box. I can not use disabled as well.

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

output

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

Is there any way to achieve this behaviour?

Answer 1

这是一个纯 javascript 的解决方案，您可以简单地将其调整为 HostListener 或(keydown)角度。基本上我们只是返回 false 并阻止任何不是箭头键的键的默认行为（我使用的是 mac 并且不知道哪个 home 键是，您可以在此处检查并将其添加到允许的数组中键码

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">

在示例中，您仍然可以使用箭头键“导航”值，但不能键入或删除任何内容。