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;
}
相关推荐
2501_9159184112 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063238 分钟前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
凉白开<--1 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Digitally2 小时前
如何将 iPhone 备份到电脑/PC 的前 5 种方法
ios·电脑·iphone
Swift社区4 小时前
在企业内部分发 iOS App 时如何生成并使用 manifest.plist
macos·ios·cocoa
他们都不看好你,偏偏你最不争气7 小时前
【iOS】push 和 present
ios
2501_9160137410 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184112 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张12 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
wjm04100613 小时前
ios面试八股文
ios·面试