收藏
评论

底部输入框获取焦点上推页面



 1.首先在wxml的输入框里面添加adjust-position="{{false}}"

  2.监听focus事件,通过获取e.detail.height(即弹出的软键盘的高度),

     把input的输入框的bottom=e.detail.height * 2 + 'rpx';还须把content

     的内容高度减去键盘的高度(值须setData下)。

 3.监听失焦(blur)事件,在该方法里,把input输入框的bottom重置为0;

     且内容高度为原本的内容高度即可(值须setData下)。



以上三步可完美解决

最后一次编辑于  2018-08-07
收藏

12 个评论

  • 阿聪同学
    阿聪同学
    2018-08-29

    非常感谢,把获取到的键盘高度,赋给position: fixed容器的bottom,可以让容器浮在输入法上面,还可以自由切换输入。但是需要注意,不能使用rpx,要用px单位,否则不同的机型位置会不一样。

    2018-08-29
    赞同 1
    回复
  • jam
    jam
    2020-08-24

    如何让输入框和软键盘同步向上抬起,我用fixed定位的时候,改变bottom值,输入框会直接显示到页面上,或者软键盘抬起会有多少时间

    2020-08-24
    赞同
    回复
  • 洋洋洋
    洋洋洋
    2019-04-11

    想问下,切换输入法的时候,键盘高度会变化,这个能监听到吗

    2019-04-11
    赞同
    回复
  • 沫笺
    沫笺
    2019-02-11

    感谢大佬,想问下大佬,你用这个方法时,有遇到安卓手机底下的输入框得等到键盘完全出来后才能获取到键盘的高度吗

    2019-02-11
    赞同
    回复 1
    • 朝儿
      朝儿
      2019-02-11

      这块没注意啊 =.=||

      2019-02-11
      回复
  • 张大臀
    张大臀
    2018-08-28

    谢谢大佬

    2018-08-28
    赞同
    回复
  • 阿    龙
    阿 龙
    2018-08-27

    为什么我使用这个方法得到的值高于软键盘很多


    2018-08-27
    赞同
    回复 21
    • 朝儿
      朝儿
      2018-08-27


      你有设置这个属性吗

      2018-08-27
      回复
    • 阿    龙
      阿 龙
      2018-08-28回复朝儿

      没有,我是这么写的

      <textarea focus="{{isShow}}" style='bottom:{{height}}rpx' fixed="{{true}}" adjust-position='{{false}}' bindblur='_cancelEvent' disabled='{{noteOfBg}}'  auto-height='true'  placeholder='请输入你的回答...' bindfocus='focusFn'  maxlength="-1" show-confirm-bar="{{false}}" bindinput="bindinput" value='{{inputValue}}'></textarea>


      2018-08-28
      回复
    • 阿    龙
      阿 龙
      2018-08-28回复朝儿


      2018-08-28
      回复
    • 朝儿
      朝儿
      2018-08-28回复阿 龙

      有代码片段吗

      2018-08-28
      回复
    • 朝儿
      朝儿
      2018-08-28回复阿 龙

      同学,这是你的代码片段吗,里面的内容怎么是音频???

      2018-08-28
      回复
    查看更多(16)
  • Billy
    Billy
    2018-07-31

    实测有效,感谢

    2018-07-31
    赞同
    回复 1
    • 朝儿
      朝儿
      2018-07-31

      no 三克油

      2018-07-31
      回复
  • 相见不如怀念
    相见不如怀念
    2018-07-19

    你好,为啥我的这个属性没作用fixed="true" adjust-position="false" show-confirm-bar="false"我加了这些属性,后面两个都没有生效,不知道为什么。而且我按照你写的方法,弹起键盘头部离输入框有很大一段距离,而且这样操作好像也很不流畅。

    2018-07-19
    赞同
    回复 2
    • 朝儿
      朝儿
      2018-07-19

      上面三个全是属性全是boolean类型,你可以默认在data里给

          adjust: false

      再作用到wxml上adjust-position="{{adjust}}"


      2018-07-19
      回复
    • 相见不如怀念
      相见不如怀念
      2018-07-19

      非常感谢,可以了,平时直接写就行,不知道为啥这两个不行。

      2018-07-19
      回复
  • 2018-07-19

    请问怎么获取软键盘的高度呢?

    2018-07-19
    赞同
    回复 15
    • 朝儿
      朝儿
      2018-07-19

      在wxml的输入框上绑定bindfocus=‘focusFn’方法,在该方法里面

      focusFn(e) {

          console.log(e.detail.height)    //即为软键盘的高度

      }

      在手机上预览时即可获取到弹出软键盘打印的值,注意是在手机上查看该值

      2018-07-19
      1
      回复
    • 2018-07-19

      好的,感谢

      2018-07-19
      回复
    • 2018-07-23回复朝儿

      红米手机第一次获取的高度是0。有解吗?

      2018-07-23
      回复
    • 朝儿
      朝儿
      2018-07-24回复
      1. 是红米的某个机型的问题,可以通过wx:getSyxtemInfo({})获取到该机型,然后给定一个定值(该定值为你后来获取的软键盘的高度)

      2. 若是全部的红米手机都有该问题,建议把上推页面获取软键盘的适配拿掉,让该型号手机上推页面

      3. 暂时没遇到你这个软键盘获取不到的情况,你可以在社区里问问其他大佬=.=

      2018-07-24
      1
      回复
    • 2018-07-24

      测试机不足,只知道红米会出现问题,现在是根据红米pixelRatio==2.75来自己设置值。另外请问一下,在一个页面里有2个输入框,点击一个输入框后点击另外一个输入框的IOS软键盘会回收再上去?还有有办法隐藏光标吗?

      2018-07-24
      回复
    查看更多(10)
  • 度之
    度之
    2018-07-10

    你用小米mix2s机型试一下,就不行了。它本身就无法自动弹起

    2018-07-10
    赞同
    回复 8
    • 朝儿
      朝儿
      2018-07-10

      这个机型的手机,不用这个方法的时候,点击输入框弹不起软键盘;还是说我的这个方法,在你点击输入框之后无法弹起软键盘??

      2018-07-10
      回复
    • 度之
      度之
      2018-07-11

      这个机型不用这个方法的时候,点击输入框弹不起软键盘。 用了你这个方法之后,UI无法适配正常弹起的机型

      2018-07-11
      回复
    • 朝儿
      朝儿
      2018-07-11回复度之

      你有简单的代码片段吗,我的已经上线好久了,目前线上没有你反应的这个问题

      2018-07-11
      回复
    • 度之
      度之
      2018-07-11

      不用代码片段,你之前不也是遇到过这种情况吗,你用小米mix 2 或者mix 2s 、小米8 、小米系列的全面屏貌似都有这个问题。

      2018-07-11
      回复
    • 朝儿
      朝儿
      2018-07-11回复朝儿

      如果这个机型在只有一个输入框(即没有任何配置)的情况下,也无法弹起软键盘的话,这个估计就要@官方 了,

      2018-07-11
      回复
    查看更多(3)

正在加载...

登录 后发表内容