小程序iOS使用input输入时placeholder及输入内容上移消失

最新推荐文章于 2023-05-16 15:37:19 发布
最新推荐文章于 2023-05-16 15:37:19 发布
阅读量1.6k 收藏
点赞数
文章标签： 移动开发
原文链接：https://my.oschina.net/mdu/blog/2254619
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

开发中遇到一个bug，在一个页面，顶部是一个输入框，进入页面后直接获取焦点调起键盘，这时候iPhonex出现placeholder消失、输入框内没有光标，输入打字的时候也没有输入显示的问题，当隐藏键盘后，输入框显示正常

使用安卓机和iPhone6试了下都是正常的，猜测可能是iOS版本的原因，iPhonex版本是iOS 12.0.1，iPhone6是iOS 10.2

解决方式，给顶部加一个边距，padding或margin都可以，就可以恢复正常

 

 

转载于:https://my.oschina.net/mdu/blog/2254619

weixin_33813128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input输入框在IOS手机上偏移问题
gaoyu007的博客
07-19 1731
问题：input输入框在IOS手机上，由于placeholder字体小于输入框字体，导致placeholder字体偏上显示。 解决方案：placeholder属性，设置line-height: normal; padding-top: 0.4rem(2px)。就可以。 类似支付宝还花呗-提前还款页面。input输入框问题。 input::-webkit-input-placeholder padding-top .4rem line-height normal 注意 ：父级元素不要设置diaplay: fl
微信小程序iOS使用input输入时placeholder及输入内容消失或隐藏
weixin_43629308的博客
01-10 8285
在微信小程序开发中遇到一个小bug，在页面有一个输入框，进入页面后点击input获取焦点调起键盘，这时候iPhone出现placeholder消失、输入框内没有光标，输入打字的时候也没有输入显示的内容，当隐藏键盘后，输入框内显示正常 使用安卓机和IOS工具测试都是正常的，但是真机测试安卓正常IOD异常，猜测可能是iOS或者微信小程序自身的bug。 解决方式，给加一个边距，padding或marg...
苹果手机input输入文字消失,看不见
weixin_30343157的博客
07-09 1600
这里的方法是: 原来字体是12号,改成15号或其他大一点的字号 转载于:https://www.cnblogs.com/init-007/p/11157288.html
关于input在ios上调起软键盘，字体不显示问题 的总结
前端~锋小张
03-22 3519
最近刚接手一个新项目，在做手机适配测试时候发现input 调起ios系统软键盘后，软键盘上面打不出来字体！很是纳闷！一开始就把IOS不兼容input及软键盘的可能性排除，然后一顿排查！终于发现问题所在了！原来是common.css里面加了这句话：* { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:...
ios中input内容看不见
最新发布
marsnbsn的博客
05-16 425
做移动端和pc端的双端页面，会发现一些css属性兼容性问题，平时在电脑谷歌浏览器调试和开放多，所以放到真机测试有时候会有一些差别。1、在ios的safair浏览器中input框的line-height有兼容性问题，会导致内容偏移看不见，尝试使用line-height：noraml属性，惊奇的发现解决了！2、在ios的safair浏览器中，不支持gap（弹性盒子）属性。这里记录一下遇到的问题。
微信小程序中input组件的type属性3个值的作用
03-29
input组件是小程序的内容输入框组件，通常是这样来使用的： <input type="text" placeholder="输入点内容吧" /> 从文档中可以看到，type属性有三个值：text, number，digit。当我们使用这三个属性值，并在微信...
微信小程序中遇到的iOS兼容性问题小结
10-17
当在iOS设备上使用Input组件时，可能会发现placeholder的字体位置不正确，没有居中显示。为了解决这个问题，可以尝试为placeholder设置`line-height`和`font-size`属性，同时调整input元素的高度，使其与文字对齐。...
微信小程序中的ios兼容性问题
03-29
3.微信小程序中解决ios中new Date() 时间格式不兼容 在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常 let ...
Textarea输入字数限制实例(兼容iOS&安卓)
08-30
在本例中，开发者遇到了一个问题，即在iOS设备上，使用`onkeyup`事件无法正确限制输入字符数。这是因为`onkeyup`事件在某些情况下可能不会触发，特别是在用户使用物理键盘或者虚拟键盘的删除键时。为了解决这个问题...
iOS 输入文字时文本框上移
weixin_30849403的博客
10-09 194
1.在xib的头文件里面添加textField的委托协议，如：@interface ZLViewController : UIViewController<UITextFieldDelegate>; 2.在xib 的 .m文件里的函数viewDidLoad添加某个或某几个textField的delegate如：self.messageTextField.delegate=self; ...
微信小程序input自动聚焦后placeholder文字位置上移
HuLuWa1997的博客
11-21 3703
问题： 这个问题出现的原因是给input上面给了上下的padding或者margin值 解决方法是给input给height和line-height 代码如下： <view class="searchView"> <image class="backImgStyle" src="{{imageUrl}}/epacSearch/backIcon.png" bindtap="backPage"></image> <input class="se
解决Vant 的 Dialog 组件 + 小程序元素 input 组件，在弹出的时候 placeholder 文字会抖动一下
m0_45445193的博客
01-28 1844
Vant 的 Dialog 组件 + 小程序元素 input 组件，在弹出的时候 placeholder 文字会抖动一下
微信小程序使用fixed定位的input输入框placeholder随屏幕滚动的bug
weixin_45208435的博客
04-11 943
解决方案： 把input输入框改为textarea 然后加上属性 fixed="true"就可以了
解决微信小程序placeholder文字”悬浮“问题
weixin_30588729的博客
08-16 2329
方法一： 在弹出层显示时隐藏input或者textarea组件，测试发现只有设置”display:none“才生效，设置"opacity:0"真机测试placeholder的文字依旧存在。当然也可以设置wx:if或hidden来显示隐藏，只不过这些做法都影响布局，不推荐。 后来再想了下，其实可以在隐藏textarea的时候用view来模拟textarea显示内容，这样既不改变布局，也能合理地展...
iOS textField placeholder 信息上浮
weixin_30339969的博客
06-05 135
textField placeholder 提示信息上浮 当输入框 有文的时候 placeholder 信息就浮动到左上角。 只要继承就行，使用非常简单。 tintFloatField 代码调用非常简单 #import "RPFloatingPlaceholderTextField.h" #import "RPFloatingPlaceholderTextView....
微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上
kerryqpw的博客
07-31 5128
微信小程序-input或textarea 里输入的文字或者是placeholder里的值，飘到弹出view上        微信小程序中经常会出现： 弹出view，input框文字飘到view上，如下图。            ··········由于textarea是原生组件实现，层级最高，目前还无法支持在上面覆盖元素这样的交互设计。 既然如此 我们就只能----绕着走了。  ...
iPhone X 弹出输入框隐藏后页面上移不回位问题的解决办法
weixin_30832983的博客
08-02 521
现象：简单的说就是iPhoneX页面里有输入框时，点击输入框，无论是否输入内容，点击输入框的完成或者页面其他地方隐藏输入框后，发现页面被整体顶上去了，而输入框的部分要么成黑色要么白色等，页面底部变成了输入框的顶部位置 解决办法： 方法1： 这个问题是ios12的bug，包括在其他app的webview里，只要ios12平台，app由xcode10构建，就会出现，不限于苹果...
IOS input框placeholder垂直位置偏上问题
qq_39234840的博客
09-11 4605
input::-webkit-input-placeholder{ line-height: .4rem; } 使用以上样式即可
小程序中点击input控件键盘弹出时placeholder文字上移
weixin_30652897的博客
12-26 2390
　　最近做的一个小程序项目中，出现了点击input控件键盘弹出时placeholder文字上移，刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题，因此采纳了网上搜到的“当获取焦点时，将fixed的元素改为static;失去焦点，再改回fixed”的方法，然而行不通，我试着给input加了个边框，然而当软键盘弹出时input框并没有移动，仅仅是input中的pla...
在微信小程序的input框中如何使用bindfocus，并且让placeholder="请输入内容"的placeholder置为空
04-01
placeholder: '请输入内容' }, handleFocus() { this.setData({ placeholder: '' }) } }) ``` 在上面的示例中，当input框获得焦点时，会触发handleFocus事件处理函数，将placeholder的值置为空。需要注意的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值