学无先后,达者为师

网站首页 前端文档 正文

利用JavaScript模拟京东快递单号查询效果_javascript技巧

作者:一夕ξ   更新时间: 2022-05-09 前端文档

1、上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大



 

    
    
    
    Document
    

 

 
    

快递单号

问题:

1、上面放大框的效果怎么做,倒三角虽然可以使用border来完成,但是效果会有颜色的填充

2、当输入框输入的文字较多的时候,怎么自动的改变上面放大框的高度和宽度

        .con::before {
            content: '';
            height: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent
        }


 

    
    
    
    Document
    

 

 
    
 
    

 

如果换成keydown或者keypress来注册事件的话,会少一个字,这是因为文字还没有落入文本框的时候,就以及触发了事件,但此时里面的内容还是空的,因此上面的文本框是不显示的。第二次按下的时候,立刻触发事件,此时字并没有进入盒子,盒子里面留下的只有前一个字。

注意区别

keypress更加不行,因为对于功能键是没有效果的。

4、当失去焦点的时候,就隐藏con。得到焦点就显示(onfocus、onblur)

    

原文链接:https://blog.csdn.net/qq_45387575/article/details/123193146

栏目分类
最近更新