ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

文本框输入显示大号字体预览

2021-04-04 20:34:05  阅读:144  来源: 互联网

标签:style 预览 none 文本框 字体 input border display con


文本框输入显示大号字体预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟京东快递单号查询</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color: #f1f1f1;
    }
    .search{
        position: relative;
        margin: 200px 200px;
    }
    .container{
        display: none;
        width: 150px;
        height: 24px;
        position: relative;
        top: 20px;
        left: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-style:none;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }
    .container::before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top:20px;
        left: 30px;
        border: 8px solid #fff;
        border-color: #fff transparent transparent;
    }
    input{
        position: absolute;
        top: 45px;
        left: 21px;
        width: 150px;
        margin-top: 4px;
        outline: none;
        font-size: 14px;
    }
</style>
<body>
<div class="search">
    <div class="container"></div>
    <input type="text" placeholder="请输入快递单号">
</div>

<script>
    var con=document.querySelector('.container');
    var input=document.querySelector('input');

    input.addEventListener('keyup',function (){
            if (this.value==''){
                con.style.display='none';
            }else{
                con.style.display='block';
                con.innerHTML=this.value;
            }
    })

    input.addEventListener('focus',function(){
        if(this.value!=='') {
            con.style.display = 'block';
        }
    })
    input.addEventListener('blur',function(){
            con.style.display='none';
    })
</script>
</body>
</html>

标签:style,预览,none,文本框,字体,input,border,display,con
来源: https://blog.csdn.net/m0_49007778/article/details/115432668

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有