React：输入类型号，maxLength 不起作用？ [复制]

Posted 2023-03-05

【中文标题】React：输入类型号，maxLength 不起作用？ [复制]

【英文标题】：React: Input type number, maxLength not working? [duplicate]

【发布时间】：2019-07-17 18:32:41

【问题描述】：

假设我试图在输入字段中获取 10 个数字，但 maxLength 属性不适用于 type='number'，尽管它适用于 type='text'。

import React,  Component  from 'react'
export default props => 
  const 
    handleInput
   = props;

  return (
    <div>
      <span>+92</span>
      <input type='number' placeholder='Phone Number' maxLength=10 onChange=handleInput/>
    </div>
  )

上面编写的代码 sn-p 中缺少什么？

一种可能的解决方法是，我在输入标记中使用 value 的属性并将输入类型设为文本，并通过编写 onChange 函数不断测试正则表达式中的输入值。

【问题讨论】：

我会使用文本字段作为电话号码。人们通常想放括号，+ 或 -，空格...

【参考方案1】：

这是一个普通的 html 元素，与 React 无关。

对于输入类型号被忽略，您应该实现自己的验证。 根据Mozilla文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength

【讨论】：

我也喜欢 Mozilla 文档，他们做得非常好，让所有人都可以访问（也就是可读/可理解）……但这不是官方文档。官方在 w3c 上。

我的错。确切地说是Mozilla的官方文档。