Question

我试图让用户选中/取消选中空格键或输入键盘的复选框，我想使用JavaScript功能实现此功能。

这是我的代码部分看起来的方式：

 <span class="sample" onClick="UdateComponent" tabindex="0" role="checkbox" aria-checked="" aria-decribedby="">

在这个范围内，我希望包含onkeypress或onkeydown以实现上面提到的功能，并且约束是我只需要使用JavaScript。

Answer 1

我强烈建议不要这样做。将input type="checkbox"与label结合使用。这是他们的目标。你可以非常彻底地设计它们。如果您愿意，您甚至可以隐藏input type="checkbox"，只显示label。

但是你说过你不能使用input。所以，是的，您可以使用keypress处理程序执行此操作。您可能也希望处理点击次数。见评论：

＆＃13;

// Handle toggline the "checkbox"
// Expects the element as `this` and the event as `e`
function toggleFakeCheckbox(e) {
  // States as far as I can tell from
  // https://www.w3.org/TR/wai-aria/states_and_properties#aria-checked
  // and
  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role
  this.setAttribute(
    "aria-checked",
    this.getAttribute("aria-checked") === "true" ? "false" : "true"
  );
  // Avoid the default (spacebar in particular is problematic)
  e.preventDefault();
  e.stopPropagation();
}

// Get the element
var sample = document.querySelector(".sample");

// Set up its handlers for click and keypress
sample.addEventListener("click", toggleFakeCheckbox);
sample.addEventListener("keypress", function(e) {
  // Flag for whether to toggle
  var toggle = false;
  var keyCode;
  if ("key" in e) {
    // Modern user agent
    toggle = e.key === " " || e.key === "Enter";
  } else {
    // Fallback for older user agents
    keyCode = e.which || e.keyCode;
    toggle = keyCode === 32 || keyCode === 13;
  }
  if (toggle) {
    toggleFakeCheckbox.call(this, e);
  }
});
// Give it focus for easy testing
sample.focus();

＆＃13;

/* Let's show the state of the checkbox */
[role=checkbox][aria-checked=true]:before {
  content: '[x] '
}
[role=checkbox][aria-checked=false]:before {
  content: '[ ] '
}

＆＃13;

<span class="sample" tabindex="0" role="checkbox" aria-checked="true" aria-decribedby="">Checkbox</span>

＆＃13;

但是再说一次：重新发明轮子并不是一件好事，即使你在这样做时也试图尊重所有的ARIA规则......

更新：果然，将焦点集中在IE中并点击空格键会将我们移动到页面的不同部分，即使我们都阻止了默认操作（这足以阻止在Firefox上）并停止传播。为什么这样做？因为我们试图重新发明轮子。这是一件坏事™。

要在javascript中使用键盘选中/取消选中该复选框？

1 个答案: