JavaScript仿京东搜索框实例
更新时间：2022年03月07日 10:00:06 作者：Cloud%
这篇文章主要为大家详细介绍了JavaScript仿京东搜索框实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
马上就到双十一了，我们在京东淘宝购物，疯狂剁手的同时，有没有注意到京东的搜索框呢，除了能进行搜索内容以外，它的样式又是如何实现的呢？
下面就分析一下如何实现仿京东的搜索框。
核心分析：
JavaScript部分：
1、当文本框获取焦点的时候，div中的字体颜色变为rgb(200,200,200)；
2、当文本框失去焦点事件发生时，div中的字体颜色变成原来的样式#989898；
3、当文本框输入内容时，div的属性变为 none，表现效果为文字消失；
4、当清除文本框里面内容时，divdiv的属性变为 inline-block，表现效果为文字消失；
因为是在文本框里面显示出来的内容，改变的是表单元素，判断文本框里面是否有输入内容，判断的依据是 表单的value值是否为 空字符串。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿京东搜索框</title>
<style>
*{
margin: 0;padding:0;
}
.from{
border:2px solid #e2231a;
width:490px;
height:36px;
position:relative;
margin:100px auto;
font-size: 12px;
}
.text{
position:absolute;
line-height: 36px;
left:27px;
color:#989898;
z-index:-1;
}
.search{
position:absolute;
left:22px;
width:430px;
height:34px;
outline:none;
border:1px solid transparent;
background:transparent;
line-height: 34px;
overflow: hidden;
}
.button{
position:absolute;
right:0px;
width:58px;
height:36px;
background-color: #e2231a;
border:1px solid transparent;
margin:auto;
outline:none;
cursor: pointer;
}
button:hover{
background-color: #c81623;
}
span img{
position:absolute;
right:65px;
}
</style>
</head>
<div class='from'>
<div class='text'>暗夜游戏本</div>
<input type="text" class="search" value=''>
<span class='photo' title="未选择取任何文件">
<img src="camera.png" alt="">
</span>
<button class='button'>
<i><img src="search.png" alt=""></i>
</button>
</div>
<body>
<script>
var div = document.querySelector('.from');
var input = document.querySelector('.search');
var text = document.querySelector('.text');
input.onfocus = function(){
text.style.color = 'rgb(200,200,200)'
}
input.onblur = function(){
text.style.color = '#989898'
}
input.oninput = function(){
text.style.display = 'none';
if (input.value == '') {
text.style.display = 'inline-block';
}; }
</script>
</body>
</html>显示效果：
1、未触发事件的状态
2、输入框里获取焦点的状态
3、输入框里输入内容
4、删除里面内容后
5、CSS样式效果（hover）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在实际开发中我们会遇到不确定高度的情况,那么在uniapp中我们如何获取区域的高度呐?这篇文章主要给大家介绍了关于uniapp获取页面高度与元素高度的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了Nest.js快速启动API项目过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了uni-app中使用renderjs的详细步骤,RenderJS是一种可以直接运行在视图层（webview）中的JavaScript技术,用于优化大量DOM操作的性能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-12-12
在传统的身份验证方案之上,双重身份验证（Double Token）作为一 种增强型认证方法,逐渐成为现代前端应用中的关键技术,下面小编就来为大家详细讲讲双重身份验证的实现与思路吧2025-02-02
这篇文章主要介绍了帝国cms首页列表页实现点赞功能的相关资料,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了微信小程序传值以及获取值方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04![仅用[]()+!等符号就足以实现几乎任意Javascript代码](//img.jbzj.com/images/xgimg/bcimg6.png)
仅用[]()+!等符号就足以实现几乎任意Javascript代码
仅用一些符号就足以实现几乎任意Javascript代码的方法，比较怪异，对于特殊需要可能用得到。2010-03-03
这篇文章主要为大家详细介绍了JS实现多物体运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
探索export导出一个字面量会报错export default不会报错
这篇文章主要为大家介绍了export导出一个字面量会报错而export default不会报错的问题探索解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证，对javascript表单验证相关知识感兴趣的朋友一起学习吧2016-03-03
![仅用[]()+!等符号就足以实现几乎任意Javascript代码](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论