ios 上textarea placeholder不换行的问题

发现在ios上placeholder过长时，删除内容后不换行的问题，但是重新点击textarea以后又正常了，试了一下让其重新聚焦，貌似是可以了，具体情况请具体分析，这里记录一下。

1. const onTaChange = (value) => {
2.     setContent(value)
3.     if ((!value || value.length === 0)) {
4.         if (ref){
5.             //重新聚焦
6.             ref.current.blur()
7.             ref.current.focus()
8.         }
9.     }
10. }

复制代码

 

1. import './ques.css'
2. import {TextArea} from "antd-mobile";
3. import {useRef, useState} from "react";
5. export const Question = () => {
7.     const [content, setContent] = useState('')
8.     const [placeholder,setPlaceHolder] = useState('在onchange里面计算最新的字数长度，再把最大长度提取成一个state存起来，直接   【  最新长度/最大长度  】就ok了')
9.     const [maxLen, setMaxLen] = useState(200)
11.     const ref = useRef()
13.     const getContentCount = () => {
14.         return (
15.             <div className='ta-count-box'>
16.                 {content ? content.length : 0}/{maxLen}
17.             </div>
18.         )
19.     }
21.     const onTaChange = (value) => {
22.         setContent(value)
23.         if ((!value || value.length === 0)) {
24.             if (ref){
25.                 ref.current.blur()
26.                 ref.current.focus()
27.             }
28.         }
29.     }
31.     return (
32.         <div className="que-box">
33.             <TextArea
34.                 ref={ref}
35.                 style={{ whiteSpace: 'pre-wrap' }}
36.                 id={'textarea'}
37.                 autoSize
38.                 maxLength={maxLen}
39.                 placeholder={placeholder}
40.                 rows={10}
41.                 showCount={getContentCount}
42.                 onChange={onTaChange}
43.             >
44.             </TextArea>
45.         </div>
46.     )
47. }

复制代码

 
css:

1. .que-box{
2.     margin: 15px;
3. }
5. .ta-count-box{
6.     width: 100%;
7.     text-align: right;
8. }
10. ::-webkit-input-placeholder { /* Webkit browsers*/
11.     white-space: pre-wrap!important;
12. }
14. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
15.     color: red!important;
16. }
18. :-moz-placeholder { /* Mozilla Firefox 19+ */
19.     color: red!important;
20. }
22. :-ms-input-placeholder { /* Internet Explorer 10+ */
23.     color: red!important;
24. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。