久久久简爱影视,日韩黄色网上

腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript仿京東搜索框?qū)嵗?/h1>

更新時(shí)間：2022年03月07日 10:00:06 作者：Cloud%

這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東搜索框?qū)嵗闹惺纠a介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

馬上就到雙十一了，我們?cè)诰〇|淘寶購(gòu)物，瘋狂剁手的同時(shí)，有沒(méi)有注意到京東的搜索框呢，除了能進(jìn)行搜索內(nèi)容以外，它的樣式又是如何實(shí)現(xiàn)的呢？

下面就分析一下如何實(shí)現(xiàn)仿京東的搜索框。

核心分析：

JavaScript部分：

1、當(dāng)文本框獲取焦點(diǎn)的時(shí)候，div中的字體顏色變?yōu)閞gb(200,200,200)；

2、當(dāng)文本框失去焦點(diǎn)事件發(fā)生時(shí)，div中的字體顏色變成原來(lái)的樣式#989898；

3、當(dāng)文本框輸入內(nèi)容時(shí)，div的屬性變?yōu)?none，表現(xiàn)效果為文字消失；

4、當(dāng)清除文本框里面內(nèi)容時(shí)，divdiv的屬性變?yōu)?inline-block，表現(xiàn)效果為文字消失；

因?yàn)槭窃谖谋究蚶锩骘@示出來(lái)的內(nèi)容，改變的是表單元素，判斷文本框里面是否有輸入內(nèi)容，判斷的依據(jù)是表單的value值是否為空字符串。

實(shí)現(xiàn)代碼：

<!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、未觸發(fā)事件的狀態(tài)