React 使用input限制字符长度时，部分手机(ios)输入中文时出现英文拼音

标签：10 拼音 ios filterText React 长度 使用 input

1.在使用input的onInput方法时，控制字符长度尽量使用input maxLength属性进行控制 不能使用以下方式

handleOnInput = () => {

let filterText = (e.target.value || '').replace(/[^\u4e00-\u9fa5a-zA-Z\']/g, '');
// 这里不要使用尽量不用substr限制长度，不然输入中文会出现字符超过10个后直接展示拼音问题

this.setState({ inputUserName: filterText.length > 10 ? filterText.substr(0, 10) : filterText });

}

　尽量使用 input maxLength属性进行控制字符长度

handleOnInput = () => {

let filterText = (e.target.value || '').replace(/[^\u4e00-\u9fa5a-zA-Z\']/g, '');
this.setState({ inputUserName: filterText });
}

<input className='input-wrapper' maxLength={10} onInput={this.handleOnInput } value={inputUserName} />

　　

 2.或者可以使用以下事件监听输入

onCompositionStart onCompositionUpdate onCompositionEnd

标签：10,拼音,ios,filterText,React,长度,使用,input
From： https://www.cnblogs.com/MainActivity/p/17127901.html