<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.a {
width: 300px;
height: 300px;
border: 1px black solid;
position: relative;
}
input.a {
position: absolute;
margin-top: 30%;
margin-left: 20px;
width: 200px;
height: 20px;
}
div.b {
position: absolute;
margin-top: 10%;
margin-left: 20px;
height: 50px;
width: 100px;
/* display: none; */
border: 1px black solid;
font-size: 40px;
display: none;
}
</style>
<script>
window.onload = function() {
var oinput = document.querySelector("input.a");
var oshow = document.querySelector("div.b");
console.log(oinput.value.length);
oinput.addEventListener('keyup', function(e) {
oshow.style.display = "block";
var num = e.target.value;
var owidth = e.target.style.width;
console.log(owidth);
oshow.innerText = num;
var cut = num.length - 4;
if (num.length >= 4) {
if (e.target.keycode != 8) {
oshow.style.width = 100 + 25 * cut + "px";
}
oshow.style.width = owidth - 25 + "px";
} else if (num.length == 0) {
oshow.style.display = "none";
}
})
}
</script>
</head>
<body>
<div class="a">
<div class="b"></div>
<input type="text" class="a">
</div>
</body>
</html>
2021-07-24 输入框放大
最新推荐文章于 2021-09-24 17:06:58 发布