javascript - 没有javascript的自定义单选tabIndex？

Question

我可以在本机单选按钮上应用 tabindex 并使用键盘上的和tab更改值。但是我可以对隐藏实际的自定义收音机做同样的事情吗？arrow uparrow down<input type="radio" />

https://stackblitz.com/edit/react-ts-7lgfpk?file=index.tsx

标签： javascripthtmlcssreactjs

Answer 1

而不是display:none;，您可以保留您的本机单选按钮并重新设置它们的样式，使它们看起来不可见，但仍按您预期的方式运行。

只是您可以尝试的方法之一style.css：

.radioBtn input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

此外，如果您想使用tab自定义单选按钮组的键导航，您可以为单选标签元素启用该功能：

const Radio = ({
  id,
  name,
  value,
  defaultChecked,
  onChange,
  children,
  tabIndex
}) => (
  <div
  className="radioBtn"
  >
    <input
      type='radio'
      defaultChecked={defaultChecked}
      value={value}
      id={id}   
      name={name}
      onChange={onChange}
      tabIndex={tabIndex}
    />
    <label className="radio" htmlFor={id}  tabIndex={tabIndex}>
      <span className="big">
        <span className="small"></span>
      </span>
      <span>{children}</span>
    </label>
  </div>
);