vue项目移动端实现ip输入框问题

vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。

要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框.

type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空.

解决办法：type=tel,只能输入数字，且可以获取到点字符的输入

问题：微信下keyup事件无效，回调事件中event.keyCode返回全是229.

解决办法：监听input事件，event事件对象中keycode为空，但是event.data返回输入字符，可以实现过滤.

  $--border-color:#ccc;
  $--outline-color:transparent;
  $--font-color:$--input-color;
  $base-font-size:12px;
  .ipInput {
    box-sizing: border-box;
    line-height: inherit;
    border: 1px solid $--border-color;
    overflow: hidden;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    outline: $--outline-color;
    font-size:0;
    text-indent: 0;
    background: #fff;
    &.isDisabled {
      background: $--outline-color;

      li{
 cursor:not-allowed;
 input{
   cursor:not-allowed;
 }
      }
    }
    li {
      display: inline-block;
      width:25%;
      box-sizing: border-box;
      font-size:0;
      input {
 appearance: none; 
 padding:10px 5px;
 width: calc(100% - 3px);
 text-align: center;
 outline: none;
 border: none;
 color: $--font-color;
 box-sizing: border-box;
 font-size: $base-font-size;
 &:disabled {
   background: $--outline-color;
 }
      }
      span {
 display: inline-block;
 font-size:$base-font-size;
 width: 3px;
 color: $--font-color;
      }
    }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。