输入类型号有什么作用

Question

我正在使用 React 测试库，按照它的约定，元素应该通过getByRole.

当我输入type="text"角色时textarea，这个角色很好。

现在我已经输入了type="number"，错误消息建议我使用spinbutton有效的角色，但对我来说没有意义。

输入类型有不同的作用吗number？

Answer 1

根据MDN<input type="number">：

该元素的隐式角色是 spinbutton。

因此，只要您没有通过role属性更改角色，这就是在 中使用的正确角色getByRole('spinbutton')。

输入number就像一个计数器，因此它通过单击右侧的旋转按钮或键盘箭头来上下旋转其值（甚至其伪元素也是::-webkit-inner-spin-button, ::-webkit-outer-spin-button）。

如果这让您感到惊讶，那么该输入类型可能不是表单控件的正确选择。该文档进一步写道：

如果旋转按钮不是表单控件的重要功能，请考虑不要使用 type="number"。相反，inputmode="numeric"与模式属性一起使用，将字符限制为数字和关联字符。

当数字输入用于非浮点数的任何内容时，会出现一些可访问性和可用性问题。

更新（基于OP评论）

既然 userEvent.type 是一个旋转按钮，那么它会起作用吗？

是的，它会起作用，这是一个带有基本示例的沙箱

import { render, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";

it("should type a number in input", () => {
  const { getByRole } = render(<input type="number" />);
  const input = getByRole("spinbutton");
  userEvent.type(input, "123456");
  waitFor(() => expect(input).toHaveValue("123456"));
});