Input 输入中文状态控制

最新推荐文章于 2024-11-08 17:58:40 发布

Jane_96

最新推荐文章于 2024-11-08 17:58:40 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： input 中文输入

本文链接：https://blog.youkuaiyun.com/Jane_96/article/details/87778010

本文探讨了在input框输入中文时onChange频繁触发导致的问题，例如在限制字符数场景下影响用户体验。文章介绍了三个关键方法：onCompositionStart、onCompositionUpdate和onCompositionEnd，并通过测试代码解释它们在中文输入过程中的作用。解决方案是利用onCompositionEnd方法确保在输入完成后调用onChange，以正确控制字符数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input 最常见的便是onChange方法，这个方法在input框内值(e.target.value)发生变化时，便会触发这个方法。
在输入中文的时候，拼音的过程中，onChange还是会不停的触发，这就带来了中文输入的bug，举一个栗子：

问题描述：
input框中需要限制字符数量，比如限制成5个字符，再输入“成功”两个字的过程中，会出现还没有输入完成，体精警告字符太长，这样的情况。显然，此时的onChange方法应该在我输入完成后再次触发。

测试代码

import React, {
     
     Component, Fragment} from 'react';
import {
     
     Input} from 'antd';
import './style.scss';
class Home extends Component {
     
     
  constructor(props) {
     
     
    super(props);
    this.state = {
     
     };
  }
  onChange = (e) => {
     
     
    console.log("this is e.target.value", e.target.value);
    if (e.target.value.length > 5) {
     
     
      console.log("this is too loog", e.target.value.length)
    }
  };
  render() {
     
     
    return (
      <Fragment>
        <Input style={
     
     {
     
     width