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

Here's a solution in plain javascript, you can simply adapt that to a HostListener or (keydown) in angular. Basically we're just returning false and preventing default behavior for any key that is not the arrow keys (I'm using a mac and don't know which home key is, you can check that here and add it to the array of allowed keycodes

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

In the example you can still "navigate" through the values using arrow keys, but can't type or delete anything.