<INPUT TYPE =「號碼」>滾動行爲與不同陣營

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>

來源

2017-11-11 Avery235

括號語法不是有效的HTML。它們在JSX中用於在HTML語法中插入JavaScript代碼，但顯然這不適用於純HTML。

等效HTML是：

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

Working example

注意，在這兩種情況下（反應，HTML），輸入需要有重點滾動工作。這種滾動功能也可能是一種依賴於瀏覽器的行爲。另外，請注意，如果您檢查React示例所輸出的HTML，您將看到與上面所寫的HTML相同的HTML，所以這絕對不是React特有的行爲。

來源

2017-11-11 00:53:02 Jaxx

儘管如此，仍然不會改變鼠標滾輪滾動。對你起作用嗎？ – Avery235

@ Avery235是的，請參閱在答案中鏈接的工作示例。 – Jaxx

它適用於jsfiddle，但嘗試將代碼保存爲本地.html文件並使用瀏覽器打開它。 – Avery235

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

我不知道，你試過的.html但它似乎對滾動相同的行爲。檢查codepen鏈接。

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

然而，當我試圖呈現在我的本地Chrome瀏覽器的.html，滾動不工作，並與同樣作出反應。他們都沒有迴應在本地瀏覽器上滾動。我不確定這些環境有何不同。

來源

2017-11-11 00:57:06

<INPUT TYPE =「號碼」>滾動行爲與不同陣營

回答

相關問題