Question

import React from 'react';
import { render } from 'react-dom';

const App = () => (
  <input
    type="number"
    min={0}
    max={99999}
    step={1}
  />
);

render(<App />, document.getElementById('root'));

如果我对输入框进行对焦并输入一个数字，我可以在输入框上方悬停时使用鼠标滚轮更改数字。

但是，当我创建一个包含以下内容的.html文件时，我不能够通过滚动来更改数字。知道是什么原因吗？

<!DOCTYPE html>
<html>
   <body>
    <input
      type="number"
      min={0}
      max={99999}
      step={1}
    />
   </body>
</html>

Answer 1

支架语法无效HTML。它们在JSX中用于在HTML语法中插入javascript代码，但显然在纯HTML中不起作用。

等效的HTML将是：

<!DOCTYPE html>
<html>
  <body>
    <input
      type="number"
      min="0"
      max="99999"
      step="1"
    />
  </body>
</html>

Working example

请注意，在这两种情况下（React和HTML），输入都需要有焦点才能滚动才能工作。这种滚动功能也可能是与浏览器相关的行为。

另请注意，如果您检查React示例输出的HTML，您将看到我上面写的相同HTML，因此这绝对不是特定于行为的反应。

Answer 2

＆＃13;

<!DOCTYPE html>
<html>
   <body>
    <input
      type="number"
      min=0
      max=99999
      step=1
    />
   </body>
</html>

＆＃13;

我不确定你在哪里试过.html但它似乎在滚动上有相同的行为。检查codepen链接。

https://codepen.io/nandukalidindi/pen/WXpgwr

然而，当我尝试在我的本地Chrome浏览器上呈现.html时，滚动不起作用，与React相同。他们都没有回复本地浏览器上的滚动。我不确定环境如何不同。

Answer 3

看起来滚动行为取决于是否有 onWheel 处理程序。在页面上呈现两个输入时存在差异：

<input id="input1" type="number" min="0" max="99999" step="1">
<input id="input2" type="number" min="0" max="99999" step="1" onwheel="">

此处 input2 在鼠标滚轮上递增/递减其值，但 input1 不会。

由于 React 将自己的事件处理程序附加到 dom 元素，因此输入启用了此 increment on mouse wheel 功能，并且与普通 HTML 页面相比其行为有所不同。

<input type =“number”/>滚动行为与React不同

3 个答案: