小程序input获取焦点时提示文字上移的问题

最新推荐文章于 2024-07-22 16:47:15 发布
最新推荐文章于 2024-07-22 16:47:15 发布
阅读量1.2k 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l13620804253/article/details/80109218
版权

在做一个小程序时，遇到一个问题：input获取焦点时提示文字上移的问题？查了下没见有啥解决方案，只有一个使用焦点事件来替换的，经过查找原因，发现解决方法：

给它加个box-sizing:border-box;

求赞！

lrz136
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
微信小程序的输入组件可以发送文字语音图片
10-24
- 输入框组件在微信小程序中是`<input>`标签，用于接收用户输入的文字信息。开发者可以通过设置`type`属性来调整输入框的样式，如文本、密码、电话号码等。 - 用户输入的数据可以通过绑定`value`属性获取，并可...
关于微信小程序input获取焦点页面上移的解决
qq_41227106的博客
10-30 6464
在微信小程序中，input标签获取焦点时会弹出软键盘，若你的input位置是通过定位来设计样式的话，如position:absolute;bottom:0,那么当软键盘弹起来时你的input会上移到软键盘的上面，也就是整个页面进行了上移操作，主要原因是input里有adjust-position属性，这个属性就是设置软键盘弹出时时候上推页面，默认值五为true，那么就会出现一下情况 可以清晰...
小程序中点击input控件键盘弹出时placeholder文字上移
weixin_30652897的博客
12-26 2391
　　最近做的一个小程序项目中，出现了点击input控件键盘弹出时placeholder文字上移，刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题，因此采纳了网上搜到的“当获取焦点时，将fixed的元素改为static;失去焦点，再改回fixed”的方法，然而行不通，我试着给input加了个边框，然而当软键盘弹出时input框并没有移动，仅仅是input中的pla...
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
奔跑吧代码
09-04 1465
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
微信小程序input安卓手机获取焦点时候上移
S筱潇S四维Smile
12-07 826
如下图所示： 在网上搜了好多方法都无效，所以翻文档发现一个方法，亲测有效 把input组件换成textarea组件,因为textarea组件有个fixed属性 <textarea placeholder-class="placeholder-class" auto-height fixed class="input" placeholder="请填写"></textarea> 这样就完美解决了~ 文档：textarea | 微信开放文档 ...
input框聚焦时，提示文字上移
Cheryl的加工厂
09-05 2888
如图所示，期望实现下图效果 当input框聚焦时，提示词上移且样式改变，如果input输入了值，则提示词不还原位置，如果不存在，提示词还原位置。 思路： 移动词为label，当input.onfocus时，label增加active样式，增加上移动画，当input.onblur时，还原样式 判断输入框是否输入了值，如果输入了，则label增加样式，如果为空，则还原样式。 代码如下： <!DOCTYPE html> <html lang="en"> <head>
小程序输入框文字弹出 文字上移问题
qq_38113270的博客
08-18 3188
输入框文字上移问题 wxlm <input autoFocus="true" bindconfirm="confirmSearch" bindinput="search" class="srch-ipt" confirmType="search" placeholder="搜索内容" placeholderClass="ipt-placeholder" type="text" value="...
小程序输入框导致页面整体上移，在获得焦点时固定住页面的解决办法
xjf106的博客
12-07 1686
1、输入框组件设置 adjust-position="{{false}}" 2、输入框容器fixed定位，style="bottom: {{bottom}}px" 3、如下 // 监听input获取焦点 onFocus (e) { let that = this that.setData({ bottom: e.detail.height }) }, // 监听input失去焦点 onBlur (e) { let that = this t
CSS点击input输入框后提示文字上移缩小 ( 可直接套用 )
qq_40137978的博客
06-17 1780
点击前： 点击后： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div class="login"
微信小程序之MaterialDesign--input组件详解
08-31
`input` 组件是小程序中用于接收用户输入的控件，它在 Material Design 中通常会伴随着动态效果，如输入时底部边框颜色变化、浮动提示文字等。在微信小程序中，我们可以利用 `input` 的各种事件来实现这些效果。 ...
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
10-23
主要介绍了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果,可实现使用JavaScript判断密码框是否获得焦点来隐藏与显示提示文字,非常简单实用,需要的朋友可以参考下
搜索框.zip小程序精选源码
08-11
2. 搜索建议：当用户输入时，显示相关的搜索建议，可以利用`bindfocus`事件在输入框获得焦点时获取并显示建议数据。 四、API调用与接口对接 1. 网络请求：如果搜索功能需要对接后端服务，那么就需要使用`wx....
从细节入手：点击输入框，提示文字瞬间变身小精灵
Shids_的博客
12-01 3167
从细节入手：点击输入框，提示文字瞬间变身小精灵
uni-app input输入框聚焦后焦点错乱偏移
jjbao的博客
01-07 2758
uni-app input输入框聚焦后焦点错乱偏移
uniapp input输入内容时内容闪烁问题解决
weixin_44201361的博客
06-08 4183
uniapp input输入内容时内容闪烁问题解决
解决微信小程序开发者工具输入框焦点问题
aozhi7108的博客
07-28 1367
Windows10笔记本上运行微信小程序开发者工具，输入框（input，textarea）没有焦点，只能在真机调试，效率太低。后来发现是Window10对笔记本高分屏支持不好，要DPI缩放，导致兼容性问题。解决方法： 显示设置、缩放与布局改为100%。这样就可以点击输入框了，但是字体变得很小，最好是外接显示器。 不修改DPI缩放，长按输入框即可！ 转载于:https...
小程序底部input输入框，键盘弹起时页面整体上移问题解决
weixin_45559449的博客
07-18 7860
小程序中，当input输入框位于页面底部时，输入框聚焦后键盘弹起，页面会整体上移，将输入框所在位置定位到键盘上方（图2）1、input设置属性 :adjust-position=“false”，键盘弹起时，不上推页面。由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也需要使用 px。2、input获取焦点事件中，监听键盘高度，赋值给bottom属性。3、input失去焦点事件中，监听键盘高度，重置bottom值为0。键盘弹起时，页面其他元素不动不动，底部输入框跟随键盘上弹（图3）
JAVA毕业设计152—基于Java+Springboot+vue+小程序的个人健康管理系统小程序(源代码+数据库+15000字论文)
最新发布
wx_grapro666的博客
07-22 491
本项目前后端分离带小程序(可以改为ssm版本)，分为用户、管理员两种角色 1、用户： 注册、登录、健康食补、药品信息、运动教程、健康贴士、论坛交流、公告、论坛、体检记录、每日计划、留言、个人信息、密码修改 2、管理员： 管理员管理、论坛管理、体检记录管理、用户管理、健康贴士管理、计划管理、食谱管理、公告管理、论坛管理、轮播图管理、留言管理 后端： Springboot mybatisPlus Mysql 前端： Vue Vue-router axios elementUi 微信小程序
微信小程序input获取焦点在键盘山
09-20
一般情况下，当input位于页面的上半部分时，键盘弹出后会将该input上移，使其保持在键盘上方，以便用户能够看到自己所输入的内容。而当input位于页面的下半部分时，键盘弹出后会将整个页面上移，使input保持在可见...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lrz136

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值