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;
}
相关推荐
叽哥3 小时前
Flutter Riverpod上手指南
android·flutter·ios
用户091 天前
SwiftUI Charts 函数绘图完全指南
ios·swiftui·swift
YungFan1 天前
iOS26适配指南之UIColor
ios·swift
权咚2 天前
阿权的开发经验小集
git·ios·xcode
用户092 天前
TipKit与CloudKit同步完全指南
ios·swift
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview