HTML+CSS定制小程序开发实现搜索框：
需求分析：
1、定制小程序开发输入框焦点事件
:成为焦点, 定制小程序开发点击输入框的时候，出现闪烁光标，此时可以输入内容。
:失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容。
2、获取元素
3、注册事件
onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容
1)、显示ul
2)、自身边框改变 （通过新增search类名）
onblur :, 点击页面空白区域，光标消失。此时不可以输入内容
1)、隐藏ul
2)、自身边框改变 （通过移除search类名）
代码内容：
<!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> button, input { border: 0; outline: none; } * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .mi { position: absolute; left: 346px; top: 25px; width: 538px; height: 36px; border: 2px solid #b1191a; } .mi button { float: left; width: 80px; height: 33px; background-color: #b1191a; font-size: 16px; color: #fff; } .mi input { float: left; width: 454px; height: 33px; padding-left: 10px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; transition: all 0.3s; } .mi .search { border: 1px solid #b1191a; } .result-list { display: none; left: 0; top: 48px; width: 454px; border: 1px solid #b1191a; border-top: 0; background: #fff; } .result-list a { display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover { background-color: #eee; }</style><body> <div class="mi"> <input type="search" name="" id="" placeholder="请输入要的搜索商品"> <button type="button">搜索</button> <ul class="result-list"> <li><a href="#">全部商品</a></li> <li><a href="#">红米手机</a></li> <li><a href="#">小米14S</a></li> <li><a href="#">小米笔记本</a></li> <li><a href="#">小米家电</a></li> <li><a href="#">小米手机</a></li> <li><a href="#">云米空调</a></li> <li><a href="#">云米智能机器人</a></li> </ul> </div></body><script>//1.获取元素 let input = document.querySelector('input') let ul = document.querySelector('.result-list') //2.注册事件 //onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容 input.onfocus = function(){ console.log('点击了，出现光标了，此时可以输入文字') //(1)显示ul ul.style.display = 'block' //(2)自身边框改变 （通过新增search类名） this.classList.add('search') } //onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容 input.onblur = function(){ console.log('点其他地方了，光标消失了，此时不可以输入文字') //隐藏ul ul.style.display = 'none' //自身边框改变 （通过移除search类名） this.classList.remove('search') }</script></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
效果如下：