公告列表
公告列表
收藏
回答

input输入框输完最大长度怎么自动跳到下个input输入框

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input 工具 6.6.7 2.0.0

这种，求解，怎么自动跳到下个input

回答关注问题邀请回答
收藏

3 个回答

  • 詹小辉
    詹小辉
    2018-07-26


    <view>
     
      <view class="bind-content">
     
        <block wx:for="{{ inputLength }}" wx:key="index">
     
          <input class="bind-box__item"  type="number" value="{{ inputVal.length >= index + 1 ? inputVal[index] : '' }}" disabled catchtap="getFocus"></input>
     
        </block>
     
      </view>
     
      <input name="password" type="number" class="bind-box__cnt" maxlength="{{ inputLength }}" focus="{{ isFocus }}" bindinput="handleInput"></input>
     
    </view>



    .bind-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 70rpx;
      margin-left: 20px;
      margin-right: 20px;
    }
     
    .bind-box__item {
      width: 60rpx;
      height: 80rpx;
      font-size:24px;
      font-weight:bold;
      border-bottom: 4rpx solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
     
    .bind-box__cnt {
      width: 0;
      height: 0;
    }


      data: {
        inputLength: 6,
        isFocus: true,
        inputVal: ''
      },
      handleInput(e) {
        let that = this, val = e.detail.value;
        that.setData({
          inputVal: val,
        })

        if (val.length === 6) {

         console.log('输入完成')

        }
      },
      getFocus() {
        var that = this;
        that.setData({
          isFocus: true,
        })
      }



    不需要6个input，只需要一个正常输入的input，然后通过输入的长度，逐个重新渲染在其他view上就可以了。输入和展示分开的逻辑

    2018-07-26
    有用 2
    回复 7
    • kim
      kim
      2018-07-27

      为什么你这个没有光标


      2018-07-27
      赞
      回复
    • kim
      kim
      2018-07-27

      按照你这方法，光标在的输入框没办法给他上色啊


      2018-07-27
      赞
      回复
    • 詹小辉
      詹小辉
      2018-07-27回复kim

      要实现光标道理也差不多，你是知道你当前输入的长度的，通过长度就可以知道当前位置了。判断下给个样式

      2018-07-27
      赞 1
      回复
    • kim
      kim
      2018-07-27回复詹小辉

      去掉了，但是我点击一下input光标就出现0.0几s 就消失了

      2018-07-27
      赞
      回复
    • 詹小辉
      詹小辉
      2018-07-27回复kim
      <input class="bind-box__item {{inputVal.length === index ? 'active' : ''}}"  type="number" value="{{ inputVal.length >= index+1 ? inputVal[index] : '' }}" disabled catchtap="getFocus"></input>


      给你个代码思路

      2018-07-27
      赞
      回复
    查看更多(2)
  • 金华
    金华
    2018-07-26

    改设计，这种设计差不多就是为设计而设计

    2018-07-26
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-07-25

    bindinput 里 设置下一个框框的 focus

    2018-07-25
    有用
    回复 31
    • kim
      kim
      2018-07-25

      求例子，不是很懂 谢谢大哥

      2018-07-25
      赞
      回复
    • 卢霄霄
      卢霄霄
      2018-07-25回复kim
      <input bindinput="inputFn" focus="{{focusArray[0]}}" ></input>
      <input bindinput="inputFn" focus="{{focusArray[1]}}" ></input>
      <input bindinput="inputFn" focus="{{focusArray[2]}}" ></input>
      <input bindinput="inputFn" focus="{{focusArray[3]}}" ></input>
       
      this.index = 0
       
       
      inputFn(e){
          if(e.detail.value){
              let focusArray = [false,false,false,false]
              focusArray[++this.index] = true
              this.setData({
                  focusArray:focusArray
              })
          }
      }


      2018-07-25
      赞 1
      回复
    • 卢霄霄
      卢霄霄
      2018-07-25回复kim

      写的不是很严谨，你要用的话还要加点东西，意会。。意会。。

      2018-07-25
      赞 1
      回复
    • kim
      kim
      2018-07-25

      这个输入完第一个会跳到第二个input，第二个会跳转到第二个input 第三和第四都是跳到第二个 0.0


      2018-07-25
      赞 1
      回复
    • 卢霄霄
      卢霄霄
      2018-07-25回复kim

      你看看打印下 focusArray，是不是对的哎。。

      2018-07-25
      赞
      回复
    查看更多(26)
请 登录 后发表内容
相关问题
相关文档