html input font size,在移动端中Input大小随着font-size而变化
項(xiàng)目里準(zhǔn)備做一個(gè)模仿支付寶6位密碼輸入框，做完在谷歌瀏覽器上模擬，沒有任何問題，附圖如下：
因?yàn)槊艽a輸入框小黑點(diǎn)太小了，所以我把font-size調(diào)到了50px，在電腦網(wǎng)頁上也是一切運(yùn)行正常，但是當(dāng)我在手機(jī)上打開時(shí)，發(fā)現(xiàn)輸入框異常的大，附圖如下：
發(fā)現(xiàn)原因出自"font-size"，如果我把"font-size"修改為0，手機(jī)上效果就和電腦一樣了，但是這樣就看到輸入的內(nèi)容了，請問如何解決這個(gè)問題，保證input的大小不變，同時(shí)font-size變大。在PC上是可行的，但不知為什么在手機(jī)上不行。
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"}); //成功跳轉(zhuǎn)至about頁面
}else{
console.log("wrong and value = " + telVal);
}
}
}
}
}
請輸入交易密碼，完成身份驗(yàn)證
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位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的html input font size,在移动端中Input大小随着font-size而变化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓canvas设置HTML,安卓开发中
- 下一篇： win8.1计算机开启远程桌面连接不上,