js獲取快遞單號小練習

1、css代碼

2、html代碼

3、js代碼

完整代碼

效果圖

1、css代碼

 .box{width: 400px;height: 300px;margin: 100px auto;position: relative;}input{width: 250px;height: 40px;outline: none;}span{display: block;position: absolute;min-width: 270px;max-width: 400px;/* width: 270px;height: 40px; */border: 1px solid red;top: -50px;word-wrap: break-word;margin-bottom: 20px;/* display: none; */opacity: 0;font-size: 18px;line-height: 20px;}

2、html代碼

<div class="box"><span></span><input type="text" placeholder="請輸入您的快遞單號"></div>

3、js代碼

 <script>// 需求：獲取焦點出現框，并內容實時與input同步const ipt=document.querySelector('input')const span=document.querySelector('span')//獲取焦點，顯示spanipt.addEventListener('focus',function() {// span.style.display='block'if(ipt.value.trim()===''){span.style.opacity=0}else{span.style.opacity=1}})//span的內容等于input框內容ipt.addEventListener('input',function() {if(ipt.value.trim() ===''){span.style.opacity=0}else{span.innerHTML=ipt.valuespan.style.opacity=1}})//失去焦點,隱藏spanipt.addEventListener('blur',function(){// span.style.display='none'span.style.opacity=0})</script>

完整代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height: 300px;margin: 100px auto;position: relative;}input{width: 250px;height: 40px;outline: none;}span{display: block;position: absolute;min-width: 270px;max-width: 400px;/* width: 270px;height: 40px; */border: 1px solid red;top: -50px;word-wrap: break-word;margin-bottom: 20px;/* display: none; */opacity: 0;font-size: 18px;line-height: 20px;}</style>
</head>
<body><div class="box"><span></span><input type="text" placeholder="請輸入您的快遞單號"></div><script>// 需求：獲取焦點出現框，并內容實時與input同步const ipt=document.querySelector('input')const span=document.querySelector('span')//獲取焦點，顯示spanipt.addEventListener('focus',function() {// span.style.display='block'if(ipt.value.trim()===''){span.style.opacity=0}else{span.style.opacity=1}})//span的內容等于input框內容ipt.addEventListener('input',function() {if(ipt.value.trim() ===''){span.style.opacity=0}else{span.innerHTML=ipt.valuespan.style.opacity=1}})//失去焦點,隱藏spanipt.addEventListener('blur',function(){// span.style.display='none'span.style.opacity=0})</script>
</body>
</html>

效果圖

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/207393.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/207393.shtml
英文地址，請注明出處：http://en.pswp.cn/news/207393.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！