React网站按钮和输入在智能手机上不起作用

马雷克

这是一个简单的网站:
https : //www.tradecalc.eu
该网站可在桌面浏览器中正常运行。但是它在智能手机上无法正常工作(仅在“计算机模式”下有效)。不适用于所有“按钮”和“输入”。浏览器控制台中没有错误。至少我没有注意到这些。该网站建有:

  • 反应(挂钩)
  • 反应路由器(HashRouter)
  • 引导程序:
    import 'bootstrap/dist/css/bootstrap.css';在“ index.js”文件中。

    “按钮”和“输入”的最重要的代码:
<input
    id="price"
    name="price"
    type="number"
    step="0.01"
    min="0.1"
    className="form-control"
    autoFocus
    required
    onChange={e => setPrice(e.target.value)} />
<input
    id="percent"
    name="percent"
    type="number"
    min="0"
    className="form-control"
    required
    onChange={e => setPercent(e.target.value)} />
<select
    name="currency"
    id="currency"
    className="form-control"
    onChange={e => setCurrency(e.target.value)}>
    {currencyList.map(({ label, value }) => (
       <option key={value} value={value}>
         {label}
       </option>
    ))}
</select>

形式“按钮”:

<button type="submit" className="btn btn-secondary mr-2">Count</button>
<button type="reset" className="btn btn-outline-secondary" onClick={() => setCount(0)}>Reset</button>

其余的“按钮”:

<Link type="button" className="btn btn-secondary btn-sm" to="/">
   Back to Trade Calc
</Link>

<a href="https://www.linkedin.com/in/" target="_blank" rel="noreferrer">
   <img src={linkedin} alt="LinkedIn" />
</a>

<Link style={{ color: "red" }} to="/donation">
   Make a Donation
</Link>

<Link style={{ color: "black" }} to="/privacy">
   Privacy & Cookies Policy
</Link>

如果您需要更多代码,请告诉我。

互换

JS没错,但CSS / Markup没错。您的Cookie横幅与表格重叠。如果您尝试Tab(通过键盘)导航至下一个选项卡,则会看到该选项卡对您有效,但是由于该容器react-cookienotice-*位于表单顶部,因此您将无法在input字段中输入值

Cookie横幅

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导A标签在平板电脑和智能手机上不起作用

来自分类Dev

自适应CSS在智能手机上不起作用

来自分类Dev

CSS媒体查询在Sony Xperia Z智能手机上不起作用

来自分类Dev

为什么PDF中的超链接在智能手机上不起作用?

来自分类Dev

CSS媒体查询在Sony Xperia Z智能手机上不起作用

来自分类Dev

为什么PDF中的超链接在智能手机上不起作用?

来自分类Dev

iPhone(智能手机)CSS RWD渲染不起作用

来自分类Dev

为什么粘性页脚在内置浏览器的三星智能手机Note 2上不起作用?

来自分类Dev

智能手机上的媒体查询网站视图

来自分类Dev

Bootstrap布局在智能手机上过宽

来自分类Dev

OOP设计与智能手机上的性能

来自分类Dev

在智能手机上运行VBA

来自分类Dev

如何使我的网站响应智能手机

来自分类Dev

HTML和CSS布局在智能手机上无法正确显示

来自分类Dev

智能手机上的 Apache-Kafka 和 python,NoBrokerAvailable 错误

来自分类Dev

增加智能手机和iPhone上网站的字体大小

来自分类Dev

检测平板电脑和智能手机

来自分类Dev

热图可视化智能手机上的触摸输入(加权 2d 合并、直方图)

来自分类Dev

多电缆适配器设置不起作用-VGA到智能手机。所有电缆均已测试并正常工作

来自分类Dev

Bootstrap 3 hide导航栏按钮在手机上不起作用?

来自分类Dev

为什么单选按钮在手机上不起作用?

来自分类Dev

Bootstrap2输入-小在手机上不起作用

来自分类Dev

通知在手机上不起作用

来自分类Dev

如何仅在智能手机上编码Bootstrap手风琴

来自分类Dev

android智能手机上的固定宽度html布局

来自分类Dev

Github仅在智能手机上页面CSS麻烦

来自分类Dev

防止在智能手机上滚动特定屏幕尺寸

来自分类Dev

除非已缓存,否则SVG图片不会在智能手机上加载

来自分类Dev

如何在智能手机上相邻显示两个div?

Related 相关文章

  1. 1

    引导A标签在平板电脑和智能手机上不起作用

  2. 2

    自适应CSS在智能手机上不起作用

  3. 3

    CSS媒体查询在Sony Xperia Z智能手机上不起作用

  4. 4

    为什么PDF中的超链接在智能手机上不起作用?

  5. 5

    CSS媒体查询在Sony Xperia Z智能手机上不起作用

  6. 6

    为什么PDF中的超链接在智能手机上不起作用?

  7. 7

    iPhone(智能手机)CSS RWD渲染不起作用

  8. 8

    为什么粘性页脚在内置浏览器的三星智能手机Note 2上不起作用?

  9. 9

    智能手机上的媒体查询网站视图

  10. 10

    Bootstrap布局在智能手机上过宽

  11. 11

    OOP设计与智能手机上的性能

  12. 12

    在智能手机上运行VBA

  13. 13

    如何使我的网站响应智能手机

  14. 14

    HTML和CSS布局在智能手机上无法正确显示

  15. 15

    智能手机上的 Apache-Kafka 和 python,NoBrokerAvailable 错误

  16. 16

    增加智能手机和iPhone上网站的字体大小

  17. 17

    检测平板电脑和智能手机

  18. 18

    热图可视化智能手机上的触摸输入(加权 2d 合并、直方图)

  19. 19

    多电缆适配器设置不起作用-VGA到智能手机。所有电缆均已测试并正常工作

  20. 20

    Bootstrap 3 hide导航栏按钮在手机上不起作用?

  21. 21

    为什么单选按钮在手机上不起作用?

  22. 22

    Bootstrap2输入-小在手机上不起作用

  23. 23

    通知在手机上不起作用

  24. 24

    如何仅在智能手机上编码Bootstrap手风琴

  25. 25

    android智能手机上的固定宽度html布局

  26. 26

    Github仅在智能手机上页面CSS麻烦

  27. 27

    防止在智能手机上滚动特定屏幕尺寸

  28. 28

    除非已缓存,否则SVG图片不会在智能手机上加载

  29. 29

    如何在智能手机上相邻显示两个div?

热门标签

归档