ios 上textarea placeholder不换行的问题

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

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

export const Question = () => {

    const [content, setContent] = useState('')
    const [placeholder,setPlaceHolder] = useState('在onchange里面计算最新的字数长度,再把最大长度提取成一个state存起来,直接   【  最新长度/最大长度  】就ok了')
    const [maxLen, setMaxLen] = 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:

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;
}
相关推荐
fundroid5 小时前
Swift 进军 Android,Kotlin 该如何应对?
android·ios
形影相吊8 小时前
iOS防截屏实战
ios
吴Wu涛涛涛涛涛Tao8 小时前
Flutter 弹窗解析:从系统 Dialog 到完全自定义
flutter·ios
kymjs张涛10 小时前
零一开源|前沿技术周报 #7
android·前端·ios
思考着亮12 小时前
15-错误处理
ios
思考着亮12 小时前
9.方法
ios
思考着亮13 小时前
6.结构体和类
ios
思考着亮13 小时前
7.闭包
ios
咕噜签名分发冰淇淋15 小时前
申请注册苹果iOS企业级开发者证书需要公司拥有什么规模条件
macos·ios·cocoa
2501_915918411 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview