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

这篇具有很好参考价值的文章主要介绍了微信小程序安卓系统下Input输入内容上移错位问题的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在较长的表单中,页面可能需要滑动, 在这种情况下,在苹果手机上使用Input显示正常,但是在安卓手机上就会出现输入内容上移错位的问题,严重影响使用

需要设置一个状态控制scroll-view是否允许滑动,当Input获取焦点是,将滑动禁止,当Input失去焦点时,允许滑动文章来源地址https://www.toymoban.com/news/detail-807947.html

<scroll-view scroll-y="{{isScroll}}" style="height: 100vh;">
    <input type="digit"  @focus="bindfocus" @blur="closeblur"  />
</scroll-view>
// 获取焦点事件
bindfocus(){
    this.isScroll = false     
},
// 失去焦点事件
closeblur() {
    this.isScroll = true
}

到了这里,关于微信小程序安卓系统下Input输入内容上移错位问题的解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决uni-app微信小程序底部输入框,键盘弹起时页面整体上移问题

    做了一个记录页面(类似单方聊天页),输入框在底部;当弹出键盘时,页面整体上移,页面头信息会消失不见 比如一个记录页面,需要在键盘弹出时: 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域(即内容区)调整高度,该区域局部滚动 底部输入框f

    2024年02月13日
    浏览(178)
  • 小程序底部input输入框,键盘弹起时页面整体上移问题解决

    存在问题: 小程序中,当input输入框位于页面底部时,输入框聚焦后键盘弹起,页面会整体上移,将输入框所在位置定位到键盘上方(图2) 解决思路: 键盘弹起时,页面其他元素不动不动,底部输入框跟随键盘上弹(图3) 效果图对比: 1、input设置属性 :adjust-position=“fal

    2024年02月11日
    浏览(57)
  • 在微信小程序使用fixed布局固定input 输入框,iPhone ios系统无法获取焦点问题解决。

    问题 微信小程序 是fixed布局后 ios版本 input 输入框 无法选中 但是长按可以获取焦点 。 解决 查看微信小程序开发文档 对input的介绍 https://developers.weixin.qq.com/miniprogram/dev/component/input.html 发现了 always-embed 属性 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在

    2024年02月12日
    浏览(57)
  • 微信小程序——输入框input

    bindevent.wxss中代码: bindevent.wxml中代码: class=\\\"myinput\\\": 通过 class 属性设置该输入框的样式类,可以在 WXSS 中通过样式类来定义该输入框的样式。 bindinput=\\\"changeContent\\\": 通过 bindinput 属性将输入框的输入事件绑定到名为 changeContent 的事件处理函数上。当用户在输入框中输入内容时

    2024年02月07日
    浏览(46)
  • 微信小程序input输入框校验手机号输入错误

    inputtaskphone(e) { if(e.detail.value!=“”){ if (!(/^1[3456789]d{9}$/.test(e.detail.value))) { this.setData({ phonedisplay: true, placeholder: “”, “task.phone”:“” }) } } }, focus() { this.setData({ phonedisplay: false, placeholder: “请输入联系方式”, “task.phone”:“” }) }, data: { task: { phone: “” }, phonedisplay: false,

    2024年02月09日
    浏览(51)
  • 微信小程序 事件传参,参数同步显示 button提交内容,读取input内容

    我们先来回顾一下之前学的内容 我们可以在button组件中加入bindtap参数进行事件绑定 然后我们也能在input组件中加入bindinput参数进行事件绑定  结合以上内容我们接着学习,这么让事件绑定前端数据与后端同步 其实很简单,先来学习 先来一个基础的代码 我们给button一个事件

    2024年02月09日
    浏览(97)
  • uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input

    官网文档地址 1、template 2、script 3、温馨提示 当比较输入框内的数值大小时,由于输入的类型为string,所以比较的时候需要转换为数值类型 Number() if(Number(this.num1) Number(this.num2)){ … }

    2024年02月16日
    浏览(42)
  • 【taro react】---- 解决 iOS 真机微信小程序 Input 密码框 type 切换会导致 Input 内容丢失问题

    1. 问题场景 在密码登陆时,有显示和隐藏密码的功能,实现方式很简单,直接对输入 input 的 type 进行 password 和 text 值进行切换,就可以实现密码的显示和隐藏。 2. 实现代码 通过修改 input 的 type 值实现密码的显示和隐藏。 密码的显示和隐藏控制图标也是通过 type 值进行判断

    2024年02月03日
    浏览(34)
  • 微信小程序实现输入内容生成二维码(canvas)

    1.封装好的QRcode的js文件 2.在我们需要使用的页面的js文件中引入该文件  效果如下:  3.首先在wxml中书写 canvas标签 4.先声明一个方法来解决中文乱码的问题 5.当我们文本域的值发生改变时,也要渲染到视图层 需求: 当我们文本框输入内容时,点击以下的生成二维码按钮,下

    2024年02月16日
    浏览(68)
  • 微信小程序当在一个页面有多个input输入框,自动弹键盘,需要点击input框2次才能聚焦的问题

    微信小程序当在一个页面有多个input输入框,自动弹键盘,需要点击input框2次才能聚焦。 解决办法,在点击input框时,调用bindtap事件,关闭键盘、设置焦点。代码示例如下: 方法仅供参考!

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包