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;
}
相关推荐
非专业程序员Ping1 小时前
一文读懂字符、字形、字体
ios·swift·font
2501_915921432 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
日日行不惧千万里2 小时前
2025最新仿默往 IM 即时通讯系统源码(PC + Web + iOS + Android)完整版发布!
android·ios
歪歪1002 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
阿里超级工程师4 小时前
ios云打包证书申请不需要苹果电脑也是可以的
ios·证书·云打包
2501_915918416 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview
RollingPin8 小时前
iOS八股文之 网络
网络·网络协议·ios·https·udp·tcp·ios面试
彩旗工作室20 小时前
将iOS/macOS应用上架至App Store
macos·ios·应用商店·appstore
江东小bug王1 天前
深入解析 iOS 与 macOS 应用程序生命周期(完整指南)
macos·ios
2501_916008891 天前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone