input 限制字數輸入時候 限制字數會出現負數

如下圖這是bug效果:

解決方法：

由於用的是React寫法如下：
複製程式碼

// render: 
<input
    maxLength={NAMETOTAL}
    placeholder={'點選填寫作品名稱'}
    type="text"
    value={workName}
    onChange={this.handleChangeTitle}
    onCompositionEnd={this.handleChangeTitleCountNum}
    onCompositionStart={this.handleChangeTitleCountNum}
/>
// 上面的函式：
/* 
* NAMETOTAL：總長度
* workName: 名字
* countNum：是否開始計數
* workNameFontLimit：作品名稱字數限制
*/
handleChangeTitle (e) {
    this.setState({
        workName: e.target.value
    }, () => {
        if (!this.state.countNum) {
            this.setState({
                workNameFontLimit: NAMETOTAL - this.state.workName.length
            });
        }
    });
}
handleChangeTitleCountNum (e) {
    if (e.type === 'compositionend') {
        this.setState({
            countNum: false
        }, () => {
            this.setState({
                workNameFontLimit: NAMETOTAL - this.state.workName.length
            });
        });
    } else if (e.type === 'compositionstart') {
        this.setState({
            countNum: true
        });
    }
}

複製程式碼

相關知識點

compositionstart 事件觸發於一段文字的輸入之前
（類似於 keydown 事件，但是該事件僅在若干可見字元的輸入之前，而這些可見字元的輸入
可能需要一連串的鍵盤操作、語音識別或者點選輸入法的備選詞）。

compositionend當文字合成系統（如輸入法編輯器）完成或取消當前合成會話時，將觸發該事件。
複製程式碼