微信小程序input自动聚焦后placeholder文字位置上移

最新推荐文章于 2025-03-17 15:08:30 发布

小小小菜鸟1997

最新推荐文章于 2025-03-17 15:08:30 发布

阅读量4.3k

点赞数 3

文章标签：前端 vim 编辑器

本文链接：https://blog.csdn.net/HuLuWa1997/article/details/121450320

版权

当在微信小程序的input元素上设置上下padding或margin时，会出现placeholder文字位置上移的问题。解决此问题的方法是通过设定input的高度(height)和行高(line-height)来保持其正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：
在这里插入图片描述
这个问题出现的原因是给input上面给了上下的padding或者margin值
解决方法是给input给height和line-height
代码如下：

<view class="searchView">
      <image class="backImgStyle" src="{
    {imageUrl}}/epacSearch/backIcon.png" bindtap="backPage"></image>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小小菜鸟1997

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【微信小程序】10分钟学会微信小程序input输入框组件，你还在等什么？

java专栏

11-27

1377

通过以上详细的介绍，相信你已经对微信小程序中的input输入框组件有了全面的了解。input组件虽然看似简单，但功能强大，能够帮助开发者实现丰富的输入功能和良好的用户体验。只要你掌握了这些基础知识和技巧，就能轻松应对各种开发任务。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。

微信小程序 Vant Weapp中的field组件，placeholder上移问题

weixin_71828560的博客

04-26

1472

直接在最外层使用scroll-view包裹。

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

华为手机 微信小程序 input输入框上移

bo_gu的博客

01-09

2592

不知道大家有木有遇到过 微信小程序的input 调起输入法的时候会被挤上去输入框跑到上面去了无论css怎么写怎么布局还是会跑上移尤其是测试mm的华为手机别的手机都OK的。比方说我这里要获取用户昵称就可以这样。但是只写到这里还是会有一个上移的动作。解决的方法是给input加个。看出来了咩这里需要把。

微信小程序：修改提示信息placeholder颜色

最新发布

weixin_46001736的博客

03-17

882

微信小程序：修改提示信息placeholder颜色

微信小程序input点击输入时placeholder位移

The_zero_close的博客

03-29

2436

input使用了box-sizing: border-box;样式的同时添加了上下内边距（padding）或上下外（margin），猜测是border-box下的placeholder获得焦点之后使上下边距失效了。微信小程序原生组件input文本输入框，点击使输入框获得焦点后，placeholder占位符文字位置会向上编移，可以把box-sizing:border-box去掉。

小程序中点击input控件键盘弹出时placeholder文字上移

weixin_30652897的博客

12-26

2568

　　最近做的一个小程序项目中，出现了点击input控件键盘弹出时placeholder文字上移，刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题，因此采纳了网上搜到的“当获取焦点时，将fixed的元素改为static;失去焦点，再改回fixed”的方法，然而行不通，我试着给input加了个边框，然而当软键盘弹出时input框并没有移动，仅仅是input中的pla...

input框聚焦时，提示文字上移

Cheryl的加工厂

09-05

3273

如图所示，期望实现下图效果当input框聚焦时，提示词上移且样式改变，如果input输入了值，则提示词不还原位置，如果不存在，提示词还原位置。思路：移动词为label，当input.onfocus时，label增加active样式，增加上移动画，当input.onblur时，还原样式判断输入框是否输入了值，如果输入了，则label增加样式，如果为空，则还原样式。代码如下： <!DOCTYPE html> <html lang="en"> <head>

微信小程序input安卓手机获取焦点时候上移

S筱潇S四维Smile

12-07

939

如下图所示：在网上搜了好多方法都无效，所以翻文档发现一个方法，亲测有效把input组件换成textarea组件,因为textarea组件有个fixed属性 <textarea placeholder-class="placeholder-class" auto-height fixed class="input" placeholder="请填写"></textarea> 这样就完美解决了~ 文档：textarea | 微信开放文档 ...

微信小程序 input输入框详解及简单实例

08-31

在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、身份证号、日期等，满足不同场景的需求。以下是对`input`组件的详细解释及其相关实例。 ### 1. `input`基本...

微信小程序-两个input叠加，多次点击字体变粗或闪动

03-29

input placeholder='\u8bf7\u8f93\u5165\u6635\u79f0\uff0c\u624b\u673a\u53f7\uff0c\u5ba2\u6237\u540d\u79f0' ></input>  <input placeholder=...

微信小程序 input输入框控件详解及实例（多种示例）

08-31

在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...

面试题-003-移动端 input 的 placeholder 出现文本位置偏上的情况

machine_vision123的博客

07-31

230

input 的 placeholder 会出现文本位置偏上的情况： PC 端设置 line-height 等于 height 能够对齐移动端的解决方法：line-height: normal;

解决微信小程序输入文本时候页面上移

记录本人工作中遇到的问题、经验总结以及分享。

04-15

1457

把这个值设为同input、textarea一样的高度即可，注意单位。默认开始，可以忽略，注意兼容性即可。

css实现input获得焦点时label向上移动并且输入框下边框样式改变

热门推荐

monkeyfly学前端

01-06

1万+

Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。前提：今晚在浏览网页时，无意中发现SegmentFault网站中一位网友的评论中有一张动态图片（如上图所示），效果看起来挺炫酷的，所以呢，也想自己动手做一做，因为之前也看到过好多类似的动态效果，一直都没有机会做。今天就趁着业余时间尝试着做一些，顺便能锻炼自己的能力。如下图所示：准备工作：做之前的第

微信小程序安卓系统下Input输入内容上移错位问题的解决办法

weixin_61769998的博客

01-18

1840

微信小程序安卓系统下Input输入内容上移错位问题的解决办法

关于微信小程序input获取焦点页面上移的解决

qq_41227106的博客

10-30

6779

在微信小程序中，input标签获取焦点时会弹出软键盘，若你的input位置是通过定位来设计样式的话，如position:absolute;bottom:0,那么当软键盘弹起来时你的input会上移到软键盘的上面，也就是整个页面进行了上移操作，主要原因是input里有adjust-position属性，这个属性就是设置软键盘弹出时时候上推页面，默认值五为true，那么就会出现一下情况可以清晰...

解决微信小程序input滑动时内容上移

qq_43076278的博客

07-15

1718

在输入框获取焦点的时候给其加个view包住，属性catchtouchmove设置不可滑动。既然在边缘滑动就会有问题那就动态设置是否可以滑动获取焦点不可滑动失去焦点可滑动。在input框获取焦点的时候，上下滑动会使其文字悬浮。......

解决小程序底部input输入框键盘弹出使页面布局上移问题

qq_61122628的博客

07-13

4558

目录一、问题二、解决学习记录：解决小程序底部input输入框键盘弹出使页面布局上移问题今天在学习小程序时，遇到一个问题，我们设置的底部input输入框，在真机测试时，键盘弹出会使整体页面上移。效果如下动图：直接贴代码：wxml： wxss： js：起主要作用的地方最后成功解决问题啦~~ 效果如下：拜~~~......

小程序输入框文字弹出文字上移问题

qq_38113270的博客

08-18

3359

输入框文字上移问题 wxlm <input autoFocus="true" bindconfirm="confirmSearch" bindinput="search" class="srch-ipt" confirmType="search" placeholder="搜索内容" placeholderClass="ipt-placeholder" type="text" value="...