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

我有一个输入框。我在其中显示出一些价值。我想把那个输入框设为只读。但是箭头键，主键，结束键这些键应该可以工作

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

我尝试了

[readonly]=“true”

，但无法在输入框中导航。 我也不能使用禁用的

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

---

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

这里有一个简单的javascript解决方案，您可以简单地将其应用于HostListener或angular中的

（按键）

。基本上，我们只是返回false并防止任何非箭头键的键的默认行为（我使用的是mac，不知道哪个主键是，您可以检查它并将其添加到允许的键码数组中）

document.getElementById（'foo'）.addEventListener（'keydown'，e=>{
如果（！[37,38,39,40]。包括（e.keyCode））{
e、 预防默认值（）；
返回false；
}
})

---

我可以指定一些东西吗？据我所知，您的输入太小，无法显示它的全部内容？如果这是问题所在，您可能会禁止使用JS的所有键，只允许使用您需要的键mentioned@Sh.Pavel我也尝试了

keyup

和

keydown

事件。它在输入框为空时工作。但是当ta存在，那么这就不起作用了。嗯……这是wierd..也许最好是对内容长度添加一些检查？比如如果长度>0，那么将检查keypup/keypdown事件？但我不确定这是否起作用..我从未将其应用于禁用的输入。我的值

（lms.LmPromotionalUrl）

是一个URL数组。当我试图将新URL推送到该数组中时，它给了我一个错误。因为数组被转换为字符串。如果您有不同的问题，请随意提问@KaustubhKhareI确实按照您的建议进行了更改，但当我将数据传递到

值时，它正在将数组转换为字符串我在为
unshift
方法添加新URL时遇到错误。就像答案中所写的那样，您需要将代码调整为角度。您可以像以前一样设置数据，而不是使用@KaustubhKhareI trued值。输入框为空时，它可以工作。但如果存在数据，则无法工作。
www.facebook.com,www.google.com,www.cisco.com