【无标题】

.inputWrapper {
  width: 180px;
  /* max-height: 50px; */
  outline: 1px solid #000;
  position: relative;
  /* line-height: 19px; */
  min-height: 29px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 20px;
}
.titleDiv {
  padding: 5px;
  margin: 0;
  font: 400 14px helvetica, arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  visibility: hidden;
}
.title {
  padding: 5px;
  font: 400 14px helvetica, arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  height: 100%;
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  resize: none;
  overflow: hidden;
}
.title_normal {
  resize: none;
  border: 1px solid #000;
  min-height: 32px;
  box-sizing: border-box;
  font-size: 20px;
  width: 400px;
}
import {useRef, useEffect, useState} from 'react'
import './index.css'
function Title2() {
  const textWrapper = useRef(null)
  const textDiv = useRef(null)
  const textRef = useRef(null)
  const [str,setStr]=useState('我')
  const [inputLock,setInutLock]=useState(false)
  function makeExpandingArea(container){
    // textRef.current.addEventListener('input',function(){
    //   setStr(textRef.current.value)
    //   textDiv.current.textContent = textRef.current.value
    //   // console.log('textWrapper-style.height',textWrapper.current.style.height)
    //   // // console.log('titleDiv-scrollHeight',titleDiv.current.scrollHeight)
    //   // console.log('textRef-scrollHeight',textRef.current.scrollHeight)
    //   // if(textRef.current.scrollHeight>textWrapper.current.style.height.replace('px','')*1){
    //   //   console.log('!=')
    //   //   textWrapper.current.style.height=textRef.current.scrollHeight+'px'
    //   // }
    // },false)
    textDiv.current.textContent = textRef.current.value
    // console.log('scrollHeight',textWrapper.current.scrollHeight)
  }
  useEffect(() => {
    makeExpandingArea(textWrapper.current)
  })
  function handleKeyDown(e){
    if(e.key==='Enter'){
      e.preventDefault()
    }
  }
  function limitStr(strValue){
    console.log('strValue',strValue)
    // if(strValue){
    let re=''
    const strLength = strValue.strLength
    const byteleng = strValue.replace(/[^\x00-\xff]/g, '**').strLength
    console.log('byteleng',byteleng)
    if(byteleng<=20){
      return strValue
    }
    for(let i=0,bytenum=0;i<strLength;i++){
      let byte=strValue.charAt(i)
      if(/[\x00-\xff]/.test(byte)){
        bytenum++
      }else{
        bytenum+=2
      }
      if(bytenum<=20){
        re+=byte
      }else{
        return re
      }
    }
    // }
  }
  // useEffect(() => {
  //   limitStr(textRef?.current?.value)
  //   console.log('??',limitStr(textRef?.current?.value))
  // },[textRef?.current?.value])

 

 
  function limitWords() {
    var ChiLength=0;//中文汉字数
    var maxLength=0;
    function strlen(str){
        var newDeviceNameVal='';
        var len = 0;//字符长度
        ChiLength=0;//中文汉字数
        for (var i=0; i<str.length; i++) {
            var c = str.charCodeAt(i);
            var one = (c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f);//是否有单字节字符
            console.log('one',one)
            //单字节加1
            if (one&&len<=20) {
                len++;
                maxLength++;
            } else if (len<20) {
                len+=2;
                ChiLength++;
                maxLength++;
            }else {
              break
            }
            newDeviceNameVal+=str[i]
        }
        console.log('len',len)
        return {len,newDeviceNameVal};
    }
    var deviceNameVal=textRef.current.value;
    console.log('deviceNameVal',deviceNameVal)
    var deviceNameInput=textRef.current;
    var strLength=strlen(deviceNameVal).len;
    var filteredStr=strlen(deviceNameVal).newDeviceNameVal;
    console.log('ChiLength',ChiLength)
    //根据字符串中的汉字数，截取最终显示的字符
    console.log('filteredStr',filteredStr)
    console.log('cut-str',textRef.current.value.substring(0,20-ChiLength))
    deviceNameInput.value=textRef.current.value.substring(0,20-ChiLength);
    if(strLength>=20){
        var newMaxLength=maxLength;
        deviceNameInput.setAttribute("maxlength",newMaxLength);
    }else{
        deviceNameInput.setAttribute("maxlength",20);
    }
  }
  function getFinalStr(){
    console.log('is-entering')
    // setStr(textRef.current.value)
    textDiv.current.textContent = textRef.current.value
   
    if (!inputLock) {
      limitWords()
    }
  }

 

 
  return (
    <div className='inputWrapper' ref={textWrapper}>
      <div className='titleDiv' ref={textDiv}></div>
      {/* <pre style={{margin:0}}><span className='titleDiv' ref={textDiv}></span><br/></pre> */}
      <textarea
        // value={str}
        maxLength={20}
        className='title'
        ref={textRef}
        onKeyDown={handleKeyDown}
        // onChange={limitWords}
        onInput={getFinalStr}
        onCompositionStart={()=>{setInutLock(true)}}
        onCompositionEnd={()=>{setInutLock(false);limitWords()}}
      />
    </div>
  );
}
export default Title2;