javascript实现输入框内容提示及隐藏功能
有时输入框较小,希望输入内容后,出现一个有放大输入内容的提示框
实现思路
- 页面上先编写出提示框,然后将提示框的css属性:display设置成none,隐藏起来
- 获取输入框元素对象、信息提示框元素对象
- 为输入框元素对象绑定键盘事件- - -keyup,
- 事件处理程序:判断输入的内容是否为空,不为空- - -将输入框的内容赋值给信息提示框,并设置信息提示框显示:display设置成block;为空,设置提示框不显示
- 添加获取焦点和失去焦点事件。
- blur- - -失去焦点:鼠标不选中输入框,输入框中无光标闪烁时,设置信息提示框不显示:display设置成none
- focus- - -获取焦点:鼠标点击输入框,输入框中有光标闪烁时,判断一下,如果输入框有内容,信息提示框显示;
代码示例:
模拟京东快递单号查询 - 锐客网 * {margin: 0; padding: 0; }input {outline-style: none; }.search {position: relative; width: 220px; margin: 100px auto; }.info {display: none; position: absolute; top: -40px; left: 0; width: 170px; padding: 5px 0; font-size: 18px; line-height: 20px; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0px 2px 4px rgba(0, 0, 0, .2); }.info::before {content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-color: #fff transparent transparent; border-style: solid dashed dashed; }(*′▽`)ノノ
页面效果:
文章图片
【javascript实现输入框内容提示及隐藏功能】到此这篇关于javascript实现输入框内容提示及隐藏功能的文章就介绍到这了,更多相关js输入框内容提示及隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 用C语言实现井字棋游戏代码
- 使用JavaScript实现轮播图效果
- JavaScript实现数组去重的7种方法
- Spring|Spring Security 实现多种登录方式(常规方式外的邮件、手机验证码登录)
- 基于C语言实现简易扫雷游戏
- 简单几步实现滑动验证码(后端验证)
- 智能运维|嘉为蓝鲸助力某通信集团实现多类型应用发布自动化
- 数据结构|Java实现常见的排序算法
- python|使用OpenCV和MediaPipe实现基于深度学习的人体姿态估计
- 使用Pytorch在StarCraft II 星际争霸2上实现多智能体强化学习算法