Input组件maxLength设置不起作用

[ecpanda]

Taro UI 版本信息

v2.3.4

问题描述

maxLength属性设置以后，不能限制用户输入，超过maxLength以后，仍旧可以输入

复现代码

 <AtInput
        clear
        type="text"
        placeholder="请输入八位核销码"
        value={value}
        maxLength={8}
        onChange={this.handleChange}
/>

补充信息

微信小程序的input组件的maxlength属性设置是可以的，查看taro ui的源代码后，发现源代码中的属性错了

taro ui:

<Input
           className='at-input__input'
           id={name}
           name={name}
           type={type}
           password={password}
           placeholderStyle={placeholderStyle}
           placeholderClass={placeholderCls}
           placeholder={placeholder}
           cursorSpacing={cursorSpacing}
           maxLength={maxLength}
           autoFocus={autoFocus}
           focus={focus}
           value={value}
           confirmType={confirmType}
           cursor={cursor}
           selectionStart={selectionStart}
           selectionEnd={selectionEnd}
           adjustPosition={adjustPosition}
           onInput={this.handleInput}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onConfirm={this.handleConfirm}
           // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
           // @ts-ignore
           onKeyboardHeightChange={this.handleKeyboardHeightChange}
         />

taro:

<input
        ref={input => {
          this.inputRef = input!
          autoFocus && input?.focus()
        }}
        class='weui-input'
        value={fixControlledValue(value)}
        type={getTrueType(type, confirmType, password)}
        placeholder={placeholder}
        disabled={disabled}
        maxlength={maxlength}
        autofocus={autoFocus}
        name={name}
        onInput={this.hanldeInput}
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleKeyDown}
      />

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[u10k]

同样，也是遇到了 "taro-ui": "^3.0.0-alpha.2"

系统信息

Taro CLI 3.0.8 environment info:
System:
OS: macOS 10.15.5
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node
Yarn: 1.17.3 - ~/.nvm/versions/node/v11.15.0/bin/yarn
npm: 6.10.2 - ~/.nvm/versions/node/v11.15.0/bin/npm
npmPackages:
@tarojs/components: 3.0.8 => 3.0.8
@tarojs/mini-runner: 3.0.8 => 3.0.8
@tarojs/react: 3.0.8 => 3.0.8
@tarojs/runtime: 3.0.8 => 3.0.8
@tarojs/taro: 3.0.8 => 3.0.8
@tarojs/webpack-runner: 3.0.8 => 3.0.8
babel-preset-taro: 3.0.8 => 3.0.8
eslint-config-taro: 3.0.8 => 3.0.8
react: ^16.10.0 => 16.13.1
taro-ui: ^3.0.0-alpha.2 => 3.0.0-alpha.2
npmGlobalPackages:
typescript: 3.5.3

[ecpanda]

目前的办法是，根据taro ui中input组件的源码，在应用里复制了一个nput组件，自己修正了下属性的传递

[cat-kun]

官方不修复的吗

[knsol]

我也遇到了，官方什么时候修复这个bug啊 真是太难了

[liujuechao]

还没修复好尴尬

[liuyunzyj]

3.0.0-alpha.9版本 使用maxlength 设置还是无效

[Sshrimp]

有版本修复了这个问题吗

[hanshinn]

现在依然无效~~~

[kulthuzad-cn]

3.0.0-alpha.10 版本 仍然未修复 在官方文档上查看限制输入字符数量的属性为 maxLengh 但在 taro-ui 依赖的 @tarojs/components 中 Input 组件中接收的限制输入字符长度的属性为maxlength

处理方式一： 通过修改 node_modules/taro-ui/dist/index.ems.js及node_modules/taro-ui/dist/index.js 文件中 getInputProps 方法中的 actualProps.maxLength 改为 actualProps.maxlength 可以暂时修复 maxlength 限制 输入字符数量的功能

此方式 在重新安装依赖后会失效

处理方式二 fork 一份 3.0.0-alpha.10 版本的taro-ui项目 在 packages/taro-ui/src/components/input/index.tsx 文件中 对 maxLength 进行修改 修改 方式与之前相同 之后 当做依赖引入自己的项目

当然这些都是 临时处理方案

目前看在taro-ui next 分支下 这个问题已经修复了 期待 taro-ui 更新估计不会太久

[knsol]

好的 谢谢

在 2021-07-21 18:05:00，"Kulthuzad" @.***> 写道：

3.0.0-alpha.10 版本 仍然未修复 在官方文档上查看限制输入字符数量的属性为 maxLengh 但在 taro-ui 依赖的 @tarojs/components 中 Input 组件中接收的限制输入字符长度的属性为maxlength

但是通过修改 node_modules/taro-ui/dist/index.ems.js及node_modules/taro-ui/dist/index.js 文件中 getInputProps 方法中的 actualProps.maxLength 为 actualProps.maxlength 可以暂时修复 maxlength 限制 输入字符数量的功能

此方式 在重新安装依赖后会失效

也可以选择 fork 一份 3.0.0-alpha.10 版本的taro-ui项目 在 packages/taro-ui/src/components/input/index.tsx 文件中 对 maxLength 进行修改 修改 方式与之前相同 之后 当做依赖引入自己的项目

期待 taro-ui 更新

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[thbgh]

2021.11.29 3.0.0-alpha.10 版本 此bug仍然未修复。这个问题影响挺大的，期待 taro-ui 更新💋

[SevenLiu-code]

2021.12.10 3.0.0-alpha.10 版本 此bug仍然未修复。。。

[JoshuaFeng5]

2022.113

[JoshuaFeng5]

仍未修复， 且onchange方法也不起作用,版本Taro v3.3.20

[Lemonreds]

2022.04.14

[felix9ia]

2022.04.26

[omg186]

3.1.0-beta.2 已经修复

[dzhiqin]

2022-08-22 taro-ui3.0.0-alpha.3的版本怎么升级到taro-ui3.1.0-beta.3呢？我这边直接改package.json文件，然后执行install，但是编译的时候报错了

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
    ╷
120 │     $width: math.div($col, 12) * 100%;
    │             ^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/taro-ui/dist/style/components/flex.scss 120:13  @import
  node_modules/taro-ui/dist/style/components/index.scss 6:9    @import
  node_modules/taro-ui/dist/style/index.scss 12:9              root stylesheet

[imetric]

2022-08-22 taro-ui3.0.0-alpha.3的版本怎么升级到taro-ui3.1.0-beta.3呢？我这边直接改package.json文件，然后执行install，但是编译的时候报错了

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
    ╷
120 │     $width: math.div($col, 12) * 100%;
    │             ^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/taro-ui/dist/style/components/flex.scss 120:13  @import
  node_modules/taro-ui/dist/style/components/index.scss 6:9    @import
  node_modules/taro-ui/dist/style/index.scss 12:9              root stylesheet

+1