iOS textarea标签 placeholder多行时被隐藏，收起键盘又显示

最新推荐文章于 2024-09-06 22:33:47 发布
最新推荐文章于 2024-09-06 22:33:47 发布
阅读量1.6k 收藏
点赞数
分类专栏： React 移动端兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujin0213/article/details/100936200
版权
问题描述

如下图所示，项目里用到了textarea及其placeholder属性。在iOS上输入文字后删除，placeholder文字被隐藏了，只能显示一行，收起键盘后又能正常显示
在这里插入图片描述

原因

未知

解决方案
1、思路

动态设置标签的placeholder属性，获取输入框的值，当输入框的值为空时显示placeholder，不为空时不显示

2、具体代码

我的项目是用react写的，所以下面代码实现也是react的写法，可以根据框架自行调整

 constructor(props) {
   
        super(props);
        this
最低0.47元/天 解锁文章
【微信小程序】10分钟学会微信小程序textarea多行输入框组件，你还在等什么？
java专栏
11-27 1286
通过以上详细的介绍，相信你已经对微信小程序中的textarea多行输入框组件有了全面的了解。textarea组件虽然看似简单，但功能强大，能够帮助开发者实现丰富的输入功能和良好的用户体验。只要你掌握了这些基础知识和技巧，就能轻松应对各种开发任务。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。
微信小程序textarea组件应用介绍与案例精讲
最新发布
前端基地
03-12 1273
本文专注于微信小程序textarea组件。详细介绍其应用，包括组件的各项属性、功能及适用场景。同时搭配案例精讲，结合具体代码和实际效果展示，深入解析textarea组件在不同场景下的使用方法与技巧，帮助开发者快速上手并灵活运用该组件。
修改 placeholder 样式，placeholder 换行 以及iOS 上设置placeholder被遮挡问题解决
baidu_41601299的博客
06-11 2964
一、修改placeholder样式 通过选择器就可以简单的修改该placeholder的样式 input::placeholder{ font-size:14px; color: #666666; } 二、placeholder 换行 在input 里面很少用到,input 就只有一行而已,多行的话就会使用textarea标签,确实在textarea标签里面如何让placehol...
微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移
qq_44550566的博客
03-18 1842
微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移 第一次尝试使用 cursor-spacing解决 微信小程序使用 textarea ，ios 和 安卓 手机 ，键盘会挡住输入框。使用了 cursor-spacing 属性， 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 。 在ios上，键盘不遮挡输入框。**但是在安卓手机上， cursor-spacing 指定之后，每次输入
iOS自定义带有placeholder的TextView（多行）
暮春三月，江南草长，杂花生树，群莺乱飞。
02-27 1387
.h定义： #import @interface CloverText : UITextView @property(nonatomic,strong) UITextView *TV; - (id)initWithFrame:(CGRect)frame placeholder:(NSString *)placeholder; @end .m定义： #import "Cl
＜textarea＞＜/textarea＞ placeholder属性不显示
zixiang0326的博客
02-20 512
placeholder属性不显示
IOS手机端Textarea设置Placeholder换行
weixin_49051916的博客
06-26 515
IOS手机端Textarea设置Placeholder换行
textarea实现placeholder多行显示
qq_41375039的博客
11-09 1042
<textarea placeholder="请按照顺序填写装修内容，例如：" placeholder-class="setExample" /> 在style中 .setExample::after { content:'\A 1. \A 2. \A 3.'; line-height: 50rpx; } 其中\A实现换行
【愚公系列】《微信小程序开发解析》008-表单组件
热门推荐
时光隧道
07-12 6万+
微信小程序中的表单组件是用于创建和管理用户输入的界面元素。这些组件允许开发者在小程序中轻松地收集用户信息，比如文本、数字、选择项等。表单组件通常用于需要用户填写信息的场景，如注册、登录、提交订单、反馈等。表单容器：用于包裹表单元素，提供表单提交的功能。输入框：用于接收用户输入的文本信息。可以设置不同类型，如文本、数字、密码等。多行文本输入框：用于接收用户输入的多行文本信息。按钮：用于表单提交或执行其他操作。复选框：用于让用户进行多选操作。复选框组：用于把多个复选框组合在一起，便于管理。单选框。
【愚公系列】《微信小程序与云开发从入门到实践》017-提供用户交互功能的组件
时光隧道
09-06 4万+
在微信小程序的开发过程中，用户交互功能的实现是提升用户体验的关键。而微信小程序提供了一系列强大的组件，专门用于增强用户与应用之间的互动。这些组件不仅丰富了小程序的功能，也为开发者提供了灵活的工具，以满足不同场景下的交互需求。本篇文章将深入探讨微信小程序中主要的用户交互组件，包括按钮、表单、滑动条、对话框等。我们将详细分析每个组件的特性、使用方法以及最佳实践，帮助你更好地理解如何通过这些组件来提升用户体验。无论你是小程序开发的新手，还是希望优化现有应用的资深开发者，这篇文章都将为你提供实用的见解和技巧。
关于TEXTAREA控件在显示内容时，只显示第一行的问题。
weixin_30660027的博客
09-08 441
在用TEXTAREA控件在页面上显示内容时，有时候会遇到这个问题： “ 明明控件的值是多行，但在页面上却只显示出了第一行内容。” 此问题比较BT，据说是IE的一个BUG。 解决方法： 1。可以用这种方式绑定控件内容<!<TextArea id=“Content“><%= myContent%></TextArea>--> ...
＜textarea＞在IOS端placeholder实现换行显示百分比兼容
lllomh的博客
05-01 786
这个问题网上几乎没有可用的,经过实测,总结出一种办法, 最终效果是 在 ios safari 也可以换行 以 vant 为例: 发现placeholder 换行符在 ios 不兼容,但是值可以的.于是手动换成 value来模拟即可 定义后placeholder 设置空 <van-field class="massages" v-model="supplyMessage" .
placeHolder样式IOS不兼容 显示不全问题
dieluandan1410的博客
09-06 1118
1.要先设置input，再设置placeholder，不然会被覆盖 2.先设置input 里面的字体大小需要大于placeholder的字体大小 转载于:https://www.cnblogs.com/zhangxin123/p/11473754.html...
safari浏览器textarea标签的placeholder多行时显示不全
weixin_42863883的博客
01-07 2069
问题：使用textarea标签时，placeholder的内容很长，会换行，首次显示正常，当输入内容后，在清除，就会只显示placeholder的第一行内容，其之后的就看不到了 解决方案：使用js动态的重绘textarea标签，来使placeholder显示完成 调试解决：通过调试我发现，清除内容后，展示的placeholder只有一行，j经过反复调试属性，发现和textarea标签的重绘有关系，...
iOS UITextfield 隐藏键盘但是显示光标
yyc123yyc456yyc的博客
04-19 756
-(BOOL)textFieldShouldBeginEditing:(UITextField *)textField{ textField.inputView = [[UIView alloc] initWithFrame:CGRectZero]; textField.inputAccessoryView = [[UIView alloc] initWithFrame:CGRectZero]; [textField reloadInputViews];...
移动web端textarea的placeholder提示文字换行，android和ios都适用
tanqiaoxing的博客
06-21 2710
参考文章：https://blog.csdn.net/daiqinge/article/details/52799811$(function() { var placeholder = 'line1 \n \n line2'; $('textarea').val(placeholder); $('textarea').focus(function() { if...
怎么正确显示textarea内容的换行
liyongxxyy的专栏
02-19 5905
相信不少人都碰到过这个问题：网页中提交评论之类的，评论文字全长也就几十个字而已，用富文本编辑器有点夸张，所以用textarea实现，但评论的内容存到数据库，再读出来显示在网页上，评论的换行不见了，所有的文字变成了一行。 解决方案当然有很多种，其中，从数据库把内容读出来在网页上用js处理一下不失为一种简便的方法： 1、把从数据库读出来的内容存放在一个Div内，例如： ?
IOS软键盘弹起textarea被覆盖的问题
你，若盛开的专栏
04-21 384
setInterval与scrollIntoView配合使用，解决IOS软键盘弹起textarea被覆盖的问题 if (navigator.appVersion.indexOf("iPhone") != -1) { // setInterval与scrollIntoView配合使用，解决IOS软键盘弹起textarea被覆盖的问题 let timer = setInterval(()=>{ document.body..
IOS中文本框输入自动隐藏和自动显示
weixin_34402090的博客
07-12 131
uilabe和UIText扩展方法 +(UILabel*)LabWithFrame:(CGRect)_rect text:(NSString*)aText textColor:(UIColor*)aColor textAlign:(NSTextAlignment)aAlign ...
uniapp textarea中placeholder多行显示不全
05-31
如果你在使用uniapp的textarea组件时，发现placeholder多行显示不全，可以考虑以下两种解决方案： 1. 自定义样式 在textarea组件上添加一个自定义class，并设置样式： ```html <template> <textarea class="my-textarea" placeholder="请输入内容"></textarea> </template> <style> .my-textarea::-webkit-input-placeholder { /* 在这里设置样式 */ } .my-textarea::-moz-placeholder { /* 在这里设置样式 */ } .my-textarea:-ms-input-placeholder { /* 在这里设置样式 */ } </style> ``` 通过设置不同浏览器的placeholder样式，可以让placeholder多行显示不全的问题得到解决。 2. 使用插件 如果自定义样式的效果不理想，可以考虑使用uniapp的插件，如`u-textarea`组件，它可以自动调整placeholder的高度，以适应多行内容。 ```html <template> <u-textarea placeholder="请输入内容"></u-textarea> </template> <script> import uTextarea from '@uni/u-textarea'; export default { components: { uTextarea } } </script> ``` 以上两种方法都可以解决placeholder多行显示不全的问题，具体选择哪种方法取决于实际需求和效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值