停止空格键切换只读复选框

Question

我们有一些只读的 HTML 输入复选框，因为它们的选中状态由另一个源控制，但可以通过按空格键来切换和切换这些复选框。除了 Safari 之外的所有浏览器中都会发生这种情况，因为无论如何它都不会让您进入只读复选框。

如何禁用此空格键切换？

<input
  class="form-check-input"
  style="pointer-events: none;"
  type="checkbox"
  [(ngModel)]="registerAcceptTCs"
  id="acceptTCs"
  name="acceptTCs"
  required>

Answer 1

我在这里找到了其他页面，讨论影响JavaScript和JQuery中的空格键功能，但由于这是在注册表中，我不希望由此造成任何不良影响。

这实际上在 Angular 中很容易解决，我只是向输入上的

focus

事件添加了一个侦听器，然后调用

blur()

方法来删除焦点，这样当按下空格键时，它就不会切换选中状态（它会导致浏览器功能向下滚动页面）。

<input
  class="form-check-input"
  style="pointer-events: none;"
  type="checkbox"
  [(ngModel)]="registerAcceptTCs"
  id="acceptTCs"
  name="acceptTCs"
  required
  (focus)="(iTC.blur())" //add this line
  #iTC> //add this line