踩坑之路——微信小程序textarea中placeholder居中问题

最新推荐文章于 2024-05-16 14:48:00 发布
最新推荐文章于 2024-05-16 14:48:00 发布
阅读量1.3w 收藏 3
点赞数 4
分类专栏： 编程 文章标签： 微信小程序 textarea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42556039/article/details/82623747
版权

 

我们可以看到 textarea 可以设置line-height并呈现

   

但placeholder占位符文字却没有，设置placeholder-class、placeholder-style也不可以？？

没有思路，我就想小程序的文档案例应该有法子，但没想到

官方案例是这样子做的案例？？？看来是莫得法子了，只能用官方案例中的方法了

 

Marker.杨
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序textarea 问题处理
03-29
使用微信小程序开发公司调试是没有问题的，但是在手机端调试就有问题。  (此图片来源于网络，如有侵权，请联系删除! )  就是textarea不能跟随一起滚动。  微信小程序给了一些Bug和建议：  (此图片来源于网络，如...
微信小程序 内容自适应textarea表单组件（autoheight_textarea）
01-30
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
[微信小程序]设置placeholder的文字居中
知识共享，快乐分享
04-03 1万+
直接上代码 wxml &lt;input class='login-form-pwd' placeholder='请输入商家登录密码' placeholder-class="center"&gt;&lt;/input&gt; wss .center{ text-align: center; } 效果 思路 也就是单独为placeholder设置了一个class，然...
记录微信小程序textarea高度问题
ZhouJingID的博客
05-16 276
设置了高度自适应，当内容超过一行时高度不变。
移动端placeholder不能垂直居中解决方案
有问题可关注公众号：前端研究院 后台输入问题回复
08-04 438
width: 100%; font-size: .34rem; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: .1rem; text-indent: .4rem; color: #33...
微信小程序的开发过程中textarea光标不居中的问题
Alisa_yang的博客
01-10 2563
Textarea的光标不在左上角的原因： 1：textarea的起始标签中是否 有空格，如果有删掉。 2：设置样式text-align:left!important;
【微信小程序踩雷记录】input的placeholder无法居中
m0_54397917的博客
04-26 874
placeholder可以看作一个容器，也是要设置宽度的，设置完 float: left; text-align: center; width: 700rpx; 就好 .container-run .address .placeholder-style { float: left; text-align: center; width: 700rpx; } ...
微信小程序水平垂直居中
sam的博客
04-23 397
水平垂直居中 示例库 代码片段
如何让textarea placeholder 文字垂直居中？
分享，让视野更宽阔
10-22 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #textArea { color: white;
微信小程序踩坑记录 ------- 解决原生表单组件 textarea 的 placeholder在真机上出现偏移的问题
张鑫的博客
03-22 4585
如果我们拿到的设计图是标题和输入框文字左右对齐的话，这种时候使用正常的对齐样式，等到真机上进行调试的时候就会发现 Android 和 iOS 的表现形式不一样，textarea 的 placeholder 中的文字总是向下一些的，让人很是头疼，出现这种问题之后多出查找相关资料，最终得出结论： 由于微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会...
微信小程序 textarea 层级过高问题简单解决方案
12-30
这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 建立一个新的textarea 组件代替原生textarea ,...
微信小程序 textarea 详解及简单使用方法
09-01
在微信小程序中，`textarea`组件用于创建一个多行输入的文本域，常用于收集用户的长文本信息，如评论、反馈等。然而，与一般的HTML元素不同，微信小程序的`textarea`并不支持`bindchange`事件，这意味着我们不能在...
微信小程序中踩过的坑 input textarea swiper
热门推荐
感恩、奋进、自信
08-16 2万+
微信小程序中踩过的坑 1、input组件的问题：      在input聚焦期间，不能做css动画，否则input中的placeholder会错位     如果动画和聚焦都想要的话，那么可以在动画完成之后，在设置聚焦 2、请勿在 scroll-view 中使用 textarea、map、canvas、video 组件     swiper和swiper-item是继承scroll-vie
placeholder垂直居中（解决光标居中、文字不居中问题）
半个橙子的博客
05-04 1万+
placeholder垂直居中 解决只有光标居中，文字不居中问题。
解决uniapp中textarea输入框光标与placeholder提示内容高度不一致问题
qq_39625703的博客
12-02 1187
出现这样的原因，可能是我对textarea设置了高度，字体样式，导致了输入框光标和提示内容高度不一致，输入的信息也是和提示内容有明细的变化。输入框光标和提示内容高度保持一致。
textarea的placeholder不起作用的可能原因
york1996的博客
06-25 983
<textarea。....... > </textarea> ><中间有一个空格，导致输入框里面有内容了 ，所以placeholder显示不出来。
小程序input的placeholder不垂直居中的问题解决
qq_43437571的博客
08-26 2948
placeholder不垂直居中
关于微信小程序 textarea 设置text-align:center；时表现异常--已经解决
duan_mu_lian_jin的博客
01-09 2806
textarea 设置text-align:center
微信小程序textarea计数
最新发布
06-09
微信小程序中的`textarea`组件默认不支持字符数统计的功能，如果你想在用户输入时实时显示或限制文字数量，你需要自定义一些JavaScript代码来实现这个功能。以下是一个简单的步骤： 1. 在WXML文件中，设置一个普通的`textarea`组件： ```html <view class="input-wrap"> <textarea placeholder="最多输入100字" bindinput="handleInput"></textarea> <view class="counter">/100</view> </view> ``` 2. 在对应的JS文件中，添加处理输入事件的方法`handleInput`： ```javascript Page({ data: { inputContent: '', maxLength: 100, }, handleInput: function(e) { this.setData({ inputContent: e.detail.value }); if (this.data.inputContent.length > this.data.maxLength) { // 如果超过限制，可以在这里进行提示或者阻止输入 console.log('超过字数限制'); e.detail.value = this.data.inputContent.slice(0, this.data.maxLength); // 只保留前n个字符 } this.updateCounter(); }, updateCounter: function() { let counterEl = this.selectComponent('#counter'); counterEl.innerHTML = '/' + this.data.maxLength; } }) ``` 3. 在CSS中，你可以美化输入框和计数器的样式： ```css .input-wrap { width: 300rpx; margin-bottom: 20rpx; } .counter { color: #ff0000; } ``` 这个例子中，当你在textarea中输入时，`handleInput`方法会被触发，检查是否超过最大长度，如果超过则截断输入内容，并更新计数器显示剩余字符数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值