小程序 input 和 textarea 软键盘与输入框的距离，及其特殊属性

最新推荐文章于 2024-03-07 15:02:34 发布

zhongjunyao

最新推荐文章于 2024-03-07 15:02:34 发布

阅读量3.3k

点赞数

分类专栏：微信小程序文章标签：小程序 cursor-spacing

本文链接：https://blog.csdn.net/zjy_android_blog/article/details/102668261

版权

本文介绍了微信小程序中input和textarea的cursor-spacing属性，用于设置键盘与输入光标的距离，并提到了这两个组件的特殊属性，强调了在不同基础库版本下的兼容处理需求。

摘要由CSDN通过智能技术生成

微信小程序中 input 和 textarea 都有属性cursor-spacing，可以设置键盘与输入光标的距离，单位px，此外列出input和textarea的特殊属性

cursor-spacing

number

否

指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离

input

基础库 1.0.0 开始支持，低版本需做兼容处理。

输入框。该组件是原生组件，使用时请注意相关限制

属性	类型	默认值	必填	说明	最低版本
cursor-spacing	number	0	否	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	1.0.0
auto-f

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhongjunyao

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序-如何去掉textarea输入框呼出键盘上的完成按钮栏？【亲测有效】

**My Coding Family**

04-26

7025

微信小程序-如何去掉textarea输入框呼出键盘上的完成按钮栏？【亲测有效】

微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移

qq_44550566的博客

03-18

1668

微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移第一次尝试使用 cursor-spacing解决微信小程序使用 textarea ，ios 和安卓手机，键盘会挡住输入框。使用了 cursor-spacing 属性，指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离。在ios上，键盘不遮挡输入框。**但是在安卓手机上， cursor-spacing 指定之后，每次输入

参与评论您还未登录，请先登录后发表或查看评论

uniapp获取键盘高度顶起底部输入框

weixin_51526447的博客

12-19

2181

uniapp获取键盘高度顶起底部输入框

小程序 input 软键盘与输入框的距离

besttoby01的博客

12-29

3145

cursor-spacing: 类型：Number 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 auto-focus:true 类型：Boolean 自动聚焦，拉起键盘。如果你设置为true,那边你打开页面就会弹出键盘，这时可能会遮挡一些控件。此功能即将废弃，尽量使用focus focus: 类型...

小程序篇四：关于软键盘和input的距离

qq_32741973的博客

03-23

1592

今天做小程序遇到，文本框后被弹起的键盘遮住了一部分区域。查了一下小程序官网api在找到的解决方法。场景如下：图二是解决后的界面代码： cursor-spacing="20" <view class='pwd' catchtap='openfix'> <input type='password' bindinput='inputpwd' placeho...

小程序textarea在ios中内边距的解决办法

m0_46476533的博客

01-18

2741

小程序textarea在ios中内边距的解决办法官方文档上面有一个 disable-default-padding 属性去除在ios上面的内边距

uniapp微信小程序仿聊天 输入框在软键盘隐藏显示时与底部距离，以及保证聊天消息滚动到底部的问题以及解决办法

m0_61702149的博客

07-14

7044

uniapp 仿微信聊天,输入框与键盘的问题，以及保证聊天一直滚动到底部

微信小程序输入框与软键盘的距离 cursor-spacing

qq_40113688的博客

05-21

2234

<input cursor-spacing="100" />

小程序 - 在键盘上显示input输入框

sinat_33184880的博客

09-04

3459

在点击评论按钮时，键盘自动弹起，同时键盘上出现输入框 输入框代码大多数使用了官方提供的组件属性，建议多翻文档 https://developers.weixin.qq.com/miniprogram/dev/component/input.html https://developers.weixin.qq.com/miniprogram/dev/component/textarea....

uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制

最新发布

高级前端工程师

03-07

3736

uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办

#微信小程序#参照微信朋友圈实现内容回复、弹起输入框在软键盘之上

weixin_43811390的博客

12-29

2304

实现的是一个展示用户历史打卡数据，其中部分打卡有工作人员点评，而用户可以回复工作人员的点评（仅能回复一条）。界面效果如下图所示：简单记录整理一下这个界面的代码。纠结很久的点在于如何做到像微信朋友圈那样，点击评论按键，弹出输入框和软键盘，并且输入框的位置刚好对准需要评论的内容底下。我目前只实现了前半部分，输入框的位置还不能很好地对准内容组件的底部，并且使用感并不好，弹出收回输入框和软键盘的过程卡卡的。后续还要不断优化。  <block wx:if="

cursor-spacing 软键盘和input的距离

weixin_34252090的博客

05-21

2037

指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。例： 软键盘和input的距离300px 转载于:https://www.cnblogs.com/huancheng/p/10898578.html...

小程序弹窗中文本框textarea，唤起键盘后的BUG解决办法

mnilz的博客

12-15

1181

解决办法： 1.给textarea 标签设置 cursor-spacing="200" 属性，值根据需求尽享调整，表示textarea 光标距离键盘的距离。添加fixed属性 <textarea fixed bindinput="获取e" cursor-spacing="200" placeholder="评论一下" /> 2.点击文本框后设置弹窗position为absolute，关闭文本框后设置弹窗position为fixed .text-b { ...

微信小程序 -- textarea输入时，其框顶在手机输入键盘之上

Emily

07-31

6142

在微信小程序开发时，textarea进行输入时，会发现其效果如左图，体验感并不是很好。而我们最终需要的效果是如右图，如何实现呢？其实很简单，只需给textarea加一个属性即可：cursor-spacing，其值按需设置。 <textarea name='remark' placeholder='请输入备注' cursor-spacing="90"...

IOS上input/textarea组件输入光标太高/太长的调整办法

Honiler的博客

10-19

1377

假如希望input的高度是40px，把height/line-height的值设置为足够显示内容的值或者光标的最大理想高度，其余高度用padding填充保证输入组件有足够的响应区域。 input { padding: 10px 0; height: 20px; line-height: 20px; } ...

unaipp textarea键盘抬起遮挡问题

yehaocheng520的博客

01-19

1171

点击输入框时，键盘抬起，然后如下展示：会发现键盘部分会遮挡输入框，而我们想要的效果如下所示：解决办法就是在textarea中添加如下的属性：cursor-spacing="20" 具体数值可以根据实际情况进行调整。。。 <textarea cursor-spacing="20" :focus="focus" auto-height="true" v-model="textMsg" @focus="textareaFocus" /> 解决！ ...

uni-app开发微信小程序,textarea组件宽度设置,解决超出父级div

weixin_45395283的博客

09-11

1628

border-box：为元素设定的宽度和高度决定了元素的边框盒

微信小程序：单行输入和多行输入组件

m0_62110645的博客

10-23

4750

input组件用于录入单行文本，尽管input的基本功能是文本录入，但该组件的属性还是比较多的，也比较复杂。textarea允许输入多行文本，如果文本行数超过textarea组件的高度，会出现垂直滚动条。第一个textarea组件设置了auto-height属性，该组件会随着行数的增加而变高。注意：这些属性中，auto-focus和focus目前只能在真机上测试。微信小程序提供了两种输入类型的输入框组件，分别是单行输入框。是一个用于收集用户输入的组件，主要用于收集单行文本输入。是用来输入多行文本的。

uniapp textarea软键盘闪现

09-12

你好！关于uniapp中的textarea软键盘闪现的问题，可能有几种原因导致。以下是一些常见的解决方法： 1. 检查是否存在其他元素获取焦点：如果页面中存在其他元素（如输入框）获取焦点，当用户点击textarea时，软键盘可能会先弹出并迅速关闭。确保其他元素不会干扰textarea的焦点获取。 2. 调整页面布局：有时，页面布局可能会导致textarea在软键盘弹出时被覆盖或错位。可以尝试调整布局，确保textarea在软键盘弹出时仍然可见并正确定位。 3. 使用合适的输入框组件：uniapp提供了多种输入框组件，如input、textarea等。根据实际需求选择使用合适的组件，确保其在不同平台上正常工作。 4. 更新uniapp版本：如果你使用的是旧版本的uniapp，可能会存在一些已知的问题。尝试更新至最新版本，以获取最新的修复和改进。如果以上方法都无法解决问题，你可以提供更多关于该问题的详细信息，以便我能够提供更具体的帮助。