js当输入框获取焦点时展示输入框内的搜索图标失去焦点时隐藏搜索图标

可以使用JavaScript来实现这个效果，具体实现步骤如下： 1. 在HTML中添加一个输入框和一个搜索图标，可以使用Font Awesome等图标库。 ``` <input type="text" id="search-box"> <i class="fa fa-search" id="search-icon"></i> ``` 2. 使用CSS将搜索图标默认隐藏。 ``` #search-icon { display: none; } ``` 3. 使用JavaScript监听输入框的焦点事件，并在事件触发时展示或隐藏搜索图标。 ``` var searchBox = document.getElementById("search-box"); var searchIcon = document.getElementById("search-icon"); searchBox.addEventListener("focus", function() { searchIcon.style.display = "block"; }); searchBox.addEventListener("blur", function() { searchIcon.style.display = "none"; }); ``` 这样就可以实现输入框获取焦点时展示搜索图标，失去焦点时隐藏搜索图标的效果了。

html文本搜索框,内部右侧增加差号清空输入数据,有输入就显示,无输入就隐藏

HTML文本搜索框通常指的是`<input type="text">`元素，它用于用户在网站上输入文本。为了实现在输入内容时显示差号并允许用户清空输入，你可以添加一些简单的HTML和CSS，并利用JavaScript来实现交互功能。以下是基本的实现步骤： 1. HTML结构: ```html <input type="text" id="search-input" placeholder="搜索..."> <span class="clear-button" onclick="clearInput()">×</span> ``` 这里我们创建了一个文本输入框和一个隐藏的清除按钮。当用户点击这个“×”图标时，会触发`clearInput`函数。 2. CSS样式: ```css .clear-button { display: none; /* 初始时隐藏 */ position: absolute; right: 5px; top: 5px; } .search-box-focused .clear-button { /* 当输入聚焦时显示 */ display: inline-block; } ``` 这里设置了清除按钮的默认隐藏状态，并在输入聚焦时显示。 3. JavaScript交互 (假设已经包含了`addEventListener`等基础JavaScript功能)： ```javascript function clearInput() { document.getElementById("search-input").value = ""; // 清空输入内容 document.getElementById("search-input").classList.remove("search-box-focused"); // 移除焦点状态，让清除按钮隐藏回去 } ``` 当你给输入框添加`focus`事件监听器，让它在获取焦点时设置`search-box-focused`类，以便显示清除按钮。

设计一个网站用户登录界面用户登录界面的编写划定一个盒子，用来装载登录界面基本信息，如：用户名、密码等，要求如下： 1、高度：250px; 2、宽度：450px; 3、内边距：10px; 4、边框线：宽度1px, 实线，黑色； 5、边框圆角值为：8px 6、盒子在页面居中显示。 7、盒子底纹为浅灰色；用户界面的美化 1、界面引入iconfont.css字体样式，使用字体样式来代替用户名和密码； 2、用户名和密码灰色底纹；(2分) 3、用户名和密码左上和坐下8px的圆角；(2分) 4、用户名和密码的输入框加入底色，颜色值自拟；(2分) 5、用户名和密码的输入框的右上角和右下角8px圆角显示；(2分) 7、登录按钮高度40px,宽度305px，圆角8px,字体大小为25px，绿色底纹；白色字完成忘记密码页面的跳转 1、“忘记密码”是一个超级链接； 2、超链接去除下滑线； 3、当鼠标移到到“忘记密码”时，下划线出现 4、“忘记密码”灰色字，12px；完成用户名和密码的验证 1、使用js实现光标在用户名处锁定； 2、默认用户名和密码均为：root; 3、使用js获取页面上的用户名和密码; 4、当页面没有输入用户名、密码时点击提交按钮，弹出框提示“用户名密码为空”；当页面输入的用户名和密码跟默认的用户名密码不匹配时，弹出框提示“用户名或密码不正确”；

好的，以下是符合您要求的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>用户登录</title> <link rel="stylesheet" href="https://at.alicdn.com/t/font_2835505_yf5o5rcs1j.css" /> <style> /* 盒子样式 */ .login-box { width: 450px; height: 250px; padding: 10px; border: 1px solid black; border-radius: 8px; background-color: #f2f2f2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 输入框样式 */ input[type="text"], input[type="password"] { width: 100%; padding: 8px; margin: 8px 0; border: none; border-radius: 8px; background-color: #e6e6e6; box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } input[type="text"]:focus, input[type="password"]:focus { outline: none; box-shadow: none; } /* 按钮样式 */ .login-btn { width: 305px; height: 40px; border: none; border-radius: 8px; background-color: green; color: white; font-size: 25px; margin-top: 15px; } /* 忘记密码链接样式 */ .forgot-password { color: gray; font-size: 12px; text-decoration: none; margin-left: 10px; } .forgot-password:hover { text-decoration: underline; } /* iconfont 样式 */ .iconfont { font-size: 20px; vertical-align: middle; margin-right: 5px; } </style> </head> <body> <div class="login-box"> <div> <i class="iconfont"></i> <input type="text" placeholder="用户名" /> </div> <div> <i class="iconfont"></i> <input type="password" placeholder="密码" /> </div> <button class="login-btn">登录</button> <a href="#" class="forgot-password">忘记密码</a> </div> <script> const usernameInput = document.querySelector('input[type="text"]'); const passwordInput = document.querySelector('input[type="password"]'); const loginBtn = document.querySelector('.login-btn'); function checkInput() { const username = usernameInput.value.trim(); const password = passwordInput.value.trim(); if (!username || !password) { alert('用户名密码不能为空'); } else if (username !== 'root' || password !== 'root') { alert('用户名或密码不正确'); } else { alert('登录成功'); } } usernameInput.addEventListener('focus', () => { usernameInput.select(); }); loginBtn.addEventListener('click', checkInput); </script> </body> </html> ``` 这个示例代码中，除了实现了您要求的界面样式和功能外，还添加了一些额外的细节优化，如： - 使用了阿里巴巴矢量图库的iconfont字体样式，优化了界面的图标展示； - 为输入框添加了焦点样式，提高了用户体验； - 使用了JS实现了用户名和密码的验证，增加了网站的安全性。希望这份代码能够对您有所帮助！

阅读全文

js当输入框获取焦点时展示输入框内的搜索图标 失去焦点时隐藏搜索图标

html文本搜索框,内部右侧增加差号清空输入数据,有输入就显示,无输入就隐藏

相关推荐

js控制输入框获得和失去焦点时状态显示的方法

jQuery表单获取和失去焦点输入框提示效果

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

原生js实现密码输入框值的显示隐藏

前端实时搜索：JavaScript实现input内搜索图标与输入事件

15个CSS3动态输入框input框代码

仿百度输入框仿百度输入框

【JavaScript源代码】JavaScript实现一个输入框组件.docx

一个 输入框 提示 插件

使用CSS与JavaScript创建带提示的搜索输入框教程

html5配合css3实现带提示文字的输入框

F:\Soft\input输入框美化效果.zip

仿bilibili搜索框效果

自己写的一个搜索框

jquery实现百度搜索关键字输入下拉框提示

JS经典技巧JavaScript

css3精美网页搜索框.zip

使用JS组件实现带ToolTip验证框的实例代码

最新推荐

Python弹出输入框并获取输入值的实例

JS实现单击输入框弹出选择框效果完整实例

JS实现表单中点击小眼睛显示隐藏密码框中的密码

matplotlib-3.6.3-cp39-cp39-linux_armv7l.whl

基于Python和Opencv的车牌识别系统实现

管理建模和仿真的文件

网络隔离与防火墙策略：防御网络威胁的终极指南

在密码学中，对称加密和非对称加密有哪些关键区别，它们各自适用于哪些场景？

我的代码小部件库：统计、MySQL操作与树结构功能

"互动学习：行动中的多样性与论文攻读经历"

js当输入框获取焦点时展示输入框内的搜索图标失去焦点时隐藏搜索图标

一个输入框提示插件