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;
}
相关推荐
小范馆12 分钟前
通过 useEventBus 和 useEventCallBack 实现与原生 Android、鸿蒙、iOS 的事件交互
android·ios·harmonyos
2501_9160088918 分钟前
iOS 26 文件导出与数据分析,多工具组合下的开发者实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9160088919 分钟前
iOS混淆实战用多工具组合把IPA加固做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
Digitally3 小时前
5 种简单方法将文件从 Mac 传输到 iPhone
macos·ios·iphone
metaRTC5 小时前
metaRTC7 mac/ios编程指南
macos·ios·webrtc
ideal树叶7 小时前
iOS的热更新:OC热更新、Swift热更新、SwiftUI样式的热更新、OC与Swift对比
ios
2501_915106327 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview
咕噜签名分发冰淇淋7 小时前
苹果ios在线签名ipa应用检测工具,制作实现参考方案
ios
游戏开发爱好者810 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
二流小码农1 天前
鸿蒙开发:web页面如何适配深色模式
android·ios·harmonyos