Как сделать ввод только для чтения, но все же разрешить работу некоторых клавиш - PullRequest
Новая
       35

Как сделать ввод только для чтения, но все же разрешить работу некоторых клавиш

0 голосов
/ 13 июня 2018

У меня есть одно поле ввода.Я показываю некоторую ценность в этом.Я хочу сделать это поле ввода доступным только для чтения.Но клавиши со стрелками, клавиша Home, клавиша End, эти клавиши должны работать.

Я показываю несколько URL через запятую.Я хочу перемещаться между этими URL-адресами.Вот почему мне нужно, чтобы вышеуказанные клавиши работали.

Я пробовал с [readonly]="true", но я не могу перемещаться в поле ввода.Я также не могу использовать disabled. 

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

output 

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

Есть ли способ добиться такого поведения?

1 Ответ

0 голосов
/ 13 июня 2018

Вот решение в простом 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">

В этом примере вы все еще можете "перемещаться" по значениям с помощью клавиш со стрелками, но не можете ничего вводить или удалять.

...