好资源导航 » 文章资讯 » vue项目移动端实现ip输入框问题

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

2023-08-25 18:54:05 68

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:1pxsolid$--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:10px5px;
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;
}
}
}

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐