ios 上textarea placeholder不换行的问题
2023-12-31 15:07:29
发现在ios上placeholder过长时,删除内容后不换行的问题,但是重新点击textarea以后又正常了,试了一下让其重新聚焦,貌似是可以了,具体情况请具体分析,这里记录一下。
const onTaChange = (value) => { setContent(value) if ((!value || value.length === 0)) { if (ref){ ????????????//重新聚焦 ref.current.blur() ref.current.focus() } } }
?
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:
.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;
}
文章来源:https://blog.csdn.net/a18792627168/article/details/135315529
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!