简单模拟快递单号查询页面展示

ABU_媛

已于 2022-07-13 20:46:02 修改

阅读量894

点赞数

文章标签：大数据

于 2022-07-13 20:42:48 首次发布

本文链接：https://blog.csdn.net/ABU_ablm/article/details/125772228

版权

该案例展示了如何创建一个简单的快递单号查询页面。当输入框获取焦点且内容不为空时，会在其上方显示一个大号字体的提示框，显示输入的快递单号；失去焦点或输入为空时，提示框将隐藏。主要使用了JavaScript的keyup事件监听输入变化，以及focus和blur事件来控制提示框的显示与隐藏。

摘要由CSDN通过智能技术生成

案例分析：

①快递单号输入内容时，上面的大号字体盒子(con)显示（这里面的文字
②同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容
③如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
④注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还
没有落入文本框中。
⑤keyup:事件触发的时候，文字已经落入文本框里面了
⑥当我们失去焦点，就隐藏这个con盒子
⑦当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

<!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>
</head>
<style>
.search {
position: relative;
width: 178px;

最低0.47元/天解锁文章

ABU_媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单模拟快递单号查询页面展示

①快递单号输入内容时，上面的大号字体盒子(con)显示（这里面的文字②同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容③如果快递单号里面内容为空，则隐藏大号字体盒子(co)盒子④注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。⑤keyup:事件触发的时候，文字已经落入文本框里面了⑥当我们失去焦点，就隐藏这个con盒子⑦当我们获得焦点，并且文本框内容不为空，就显示这个co盒子......
复制链接

扫一扫