论坛 › IOS › ios 上textarea placeholder不换行的问题

大号在练葵花宝典 发表于 2024-6-26 04:35:02

ios 上textarea placeholder不换行的问题

发现在ios上placeholder过长时，删除内容后不换行的问题，但是重新点击textarea以后又正常了，试了一下让其重新聚焦，貌似是可以了，具体情况请具体分析，这里记录一下。

const onTaChange = (value) => {
    setContent(value)
    if ((!value || value.length === 0)) {
      if (ref){
            //重新聚焦
            ref.current.blur()
            ref.current.focus()
      }
    }
}  
import './ques.css'
import {TextArea} from "antd-mobile";
import {useRef, useState} from "react";

export const Question = () => {

    const = useState('')
    const = useState('在onchange里面计算最新的字数长度，再把最大长度提取成一个state存起来，直接   【最新长度/最大长度】就ok了')
    const = useState(200)

    const ref = useRef()

    const getContentCount = () => {
      return (
            <div className='ta-count-box'>
                {content ? content.length : 0}/{maxLen}
            </div>
      )
    }

    const onTaChange = (value) => {
      setContent(value)
      if ((!value || value.length === 0)) {
            if (ref){
                ref.current.blur()
                ref.current.focus()
            }
      }
    }

    return (
      <div className="que-box">
            <TextArea
                ref={ref}
                style={{ whiteSpace: 'pre-wrap' }}
                id={'textarea'}
                autoSize
                maxLength={maxLen}
                placeholder={placeholder}
                rows={10}
                showCount={getContentCount}
                onChange={onTaChange}
            >
            </TextArea>
      </div>
    )
}
 
css:
.que-box{
    margin: 15px;
}

.ta-count-box{
    width: 100%;
    text-align: right;
}

::-webkit-input-placeholder { /* Webkit browsers*/
    white-space: pre-wrap!important;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red!important;
}

:-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red!important;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: red!important;
}


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: ios 上textarea placeholder不换行的问题