html input font size,在移动端中input大小随着font-ag凯发k8国际
项目里准备做一个模仿支付宝6位密码输入框，做完在谷歌浏览器上模拟，没有任何问题，附图如下：
因为密码输入框小黑点太小了，所以我把font-size调到了50px，在电脑网页上也是一切运行正常，但是当我在手机上打开时，发现输入框异常的大，附图如下：
发现原因出自"font-size"，如果我把"font-size"修改为0，手机上效果就和电脑一样了，但是这样就看到输入的内容了，请问如何解决这个问题，保证input的大小不变，同时font-size变大。在pc上是可行的，但不知为什么在手机上不行。
app.vue文件
const pwdinput = {
template : ""
};
module.exports = {
data () {
return {
correctpassword : 123456,
items : 6,
telwidth : "",
telheight : "",
pwdwidth : "",
pwdheight : "",
msg : ""
};
},
//初始化事件
mounted : function(){
let _self = this;
const screenwidth = document.body.clientwidth; //获取屏幕宽度
const fakewidth = screenwidth*0.9 - 10; //取消边框后的宽度
_self.pwdwidth = fakewidth/6 "px";
_self.pwdheight = fakewidth/6 "px";
_self.telwidth = screenwidth*0.9 "px";
_self.telheight = _self.pwdheight;
},
components : {
'pwd-input' : pwdinput
},
methods : {
},
watch : {
'msg' : function(val,oldval){
let _self = this;
const len = val.length;
const $telinput = document.getelementsbyname('tel')[0];
const $box = document.getelementsbyname('password');
for(let i=0;i
$box[i].value = val[i];
}
$box.foreach(function(value,index,array){
if(index >= len){
$box[index].value = "";
}
})
const telval = $telinput.value;
if(telval.length == 6){
if(telval == _self.correctpassword){
this.$router.push({path : "about"}); //成功跳转至about页面
}else{
console.log("wrong and value = " telval);
}
}
}
}
}
请输入交易密码，完成身份验证
app.scss
.container{
.text-info-style{
font-size: 14px;
text-align: center;
}
.pwd-box{
margin: auto;
position: relative;
overflow: hidden;
input[type="tel"]{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
outline: none;
opacity: 0;
z-index: 1;
}
input[type="tel"]:focus{
left:-1000px;
top: -100px;
}
.fake-box{
input[type="password"]{
-webkit-appearance: none;
float: left;
border:1px #e5e5e5 solid;
border-right:none;
background-color: #ffffff;
text-align: center;
font-size: 50px;
}
}
}
}
与50位技术专家面对面20年技术见证，附赠技术全景图总结
以上是ag凯发k8国际为你收集整理的html input font size,在移动端中input大小随着font-size而变化的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 安卓canvas设置html,安卓开发中
- 下一篇：