小程序input输入框高度设置不起作用

已于 2022-02-24 14:38:48 修改
阅读量1.5k 收藏 3
点赞数 3
分类专栏： 小程序 文章标签： 小程序 css html
于 2022-02-23 10:51:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38299934/article/details/123085004
版权

其实也不是不起作用，你设置高度50px，是起作用的，设置10px，就不起作用了，这是为什么呢？很简单！一张图你就明白了
在这里插入图片描述
就是因为这个min-height,设置了最小高度，所以你设置的高度值低于这个高度就不起作用了，那么知道原因了，接下来就简单了，min-height设置0，高度就可以随意设置啦！

Peak peak
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 input输入框详解及简单实例
08-31
主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下
微信小程序 input输入框控件详解及实例（多种示例）
01-19
今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。 首先主页面中将登录的...
vue2项目中el-input单独使用max和maxlength不生效问题
six6de6的博客
08-30 2447
今天在vue2的项目中使用element中的组件，因为没有使用form所以max和maxlength属性没有生效，下面是解决办法。使用oninput方法可以控制value值的显示然后来解决值的显示问题。
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 2251
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
WePy小程序问题汇总
大个子小可爱的博客
10-11 189
框架：Wepy小程序框架 + Vant移动端组件库 问题1： 项目测试中发现若干页面样式在一些华为手机上出现了适配问题，页面底部内容被虚拟键盘遮挡，无法显示完全。 产生原因： 因为虚拟键盘位于界面的可视区域，并且占据了页面下方一定的高度。 解决方法： app.wpy 页面获取设备品牌，设置为全局变量。获取系统信息API参考链接 // 获取手机系统信息 wx.getSyst...
微信小程序 bindinput 没效果
u014520797的专栏
01-02 3959
1、写法如下，但是没效果 <input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" /> // 拿到手机号 getPhone: function (e) { var val = e.detail.value; ...
van-field自定义文本框高度，无法正常使用autosize，需要设置.textarea样式
crh0817的博客
09-22 5010
van组件的van-field自定义文本框高度，无法正常使用autosize，需要设置.textarea样式。
【element-ui】Bug集合
qq_39404437的博客
08-29 2994
element-ui内部各种组件的bug/样式的出现及bug解决方法
微信小程序input标签高度设置不生效
hello world
06-20 1410
只设置height不生效 加上min-height min-height:30rpx; height: 30rpx;
微信小程序input高度问题及placeholder与input的高度冲突问题
前端，请指教
01-10 1487
微信小程序input高度问题及placeholder与input的高度冲突问题
uview input框textarea模式，输入区域没有高度问题记录。
A_Brave的博客
07-14 5645
问题 使用uview的输入框textarea，设置高度后，点击红框下的区域无法获取到输入焦点，如下图 解决方案 auto-height设置为false，默认为true 是自动增加输入高度 ，不会和height属性设置的高度同步（下图2） auto-height设置为false就可以了 <u-input v-model="presentation" type="textarea" border height="300" :auto-height="false" /> ...
微信小程序picker组件下拉框选择input输入框的实例
01-03
微信小程序picker组件下拉框选择input输入框的实例 实现效果图： 页面 预约项目 <text>{{casArray[casIndex]}} </view
怎么解决input按钮height和普通的输入框_vue实现一个6个输入框的验证码输入组件...
weixin_39795268的博客
11-20 64
要实现的功能：完全和单输入框一样的操作，甚至可以插入覆盖：1，限制输入数字2，正常输入3，backspace删除4，paste任意位置粘贴输入5，光标选中一个数字，滚轮可以微调数字大小，限制0-96，123|456 自动覆盖光标后输入的字符，此时光标在3后，继续输入111，会得到123111，而不用手动删除4567，封装成vue单文件组件，方便任意调用。模板代码<template> ...
input的size和maxlengh属性
qq_19647103的博客
07-21 383
梳理一遍w3c，感觉基础还是不扎实，碰巧遇到input的size和maxlengh属性，从前竟然没有注意过两者的区别。 Name:  // maxlengh="5"表示输入框只可以输入5个字符。 Name:<input type="text" name="name" size="5"/> // size="5"表示输入框只可以显示5个字符，而可以输入N个字符，即size只规定了文本框的宽度
vue中写一个垂直下拉菜单，利用max-height属性
weixin_42628334的博客
09-01 1977
工作需求，需要写一个垂直下拉菜单，然后我就自己在vue里面写了一个菜单，代码在下面仅供参考。 <template> <div> <div id="biao" @click="open('nei1')">标题1</div> <ul ref="nei1"> <li>内容1&l...
微信小程序textArea输入框随着输入字数自适应高度
Faaaaaaq的博客
11-17 1985
微信小程序textArea输入框随着输入字数自适应高度
微信小程序开发中textarea实现输入框问题
weixin_41672471的博客
01-19 475
原生微信小程序，聊天输入框，高度自适应，键盘聚焦，一些bug
前端高度自适应 height和min-height 百分比 不生效原因
热门推荐
qlin_11的博客
08-13 1万+
前端高度自适应 情景 其实前端一般不去管高度，都是设置min-height，用来设置最小高度，其他时候就用理层的div来撑开就好了。但是当屏幕很大的时候，比如笔记本和台式显示屏的问题，在内容比较小的时候那么就撑不开了。 这个时候就需要获取屏幕大小也就是浏览器的大小，这里有两个思路，一个是使用**@screen来写两种样式，**在不同屏幕下有不同的样式。 另外还有一种就是，通过html height...
基于java版saas模式企业级云MES全套源码idea+ vue.js+ uniapp支持app、小程序、H5、台后管理端
最新发布
zmm201453的博客
05-19 853
MES系统，即制造执行系统，是专为制造企业设计的一种信息化管理系统。该系统从底层数据采集开始，贯穿过程监测和在线管理，直至成本相关数据管理，形成了完整的生产信息化体系。
微信小程序 input键盘挡住输入框
05-02
微信小程序开发中，在输入框获取焦点时，弹出来的软键盘有可能会挡住输入框，给用户带来不好的使用体验。出现这种情况的原因是因为页面默认的布局高度不够，无法容纳软键盘的高度。 为了解决这个问题，我们可以通过监听键盘弹起的事件，然后调整页面布局高度，使输入框不会被软键盘挡住。具体实现可以使用微信小程序提供的页面生命周期函数，比如onShow、onHide和onResize等函数。 在onShow函数中监听键盘的高度信息，然后通过获取页面高度和窗口可视高度的差值，得到键盘的高度。根据键盘的高度，再通过wx.pageScrollTo函数，调整页面布局的高度。这样就能够保证用户在输入时，输入框不会被软键盘挡住，从而获得更好的使用体验。 如果以上的方法无效，还可以尝试调整输入框和键盘的位置关系，将输入框放在键盘下面，这样就能够保证键盘不会挡住输入框了。在这种情况下，我们需要通过Page.prototype.setData函数，动态改变输入框的top值，将其放置在键盘下面。这种方法相对比较繁琐，但是可以保证输入体验的完美。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值