讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

用jquery实现输入框获取焦点消失文字_jquery

php中文网
发布： 2016-05-16 17:35:12
原创
1392人浏览过

我们在登录网站的时候，文本框中经常会有提示你输入的信息，当你点击文本框，提示信息自动消失，当文本框什么都没有，而且失去焦点的时候，又有了提示文字。

1.原型开发，先做一个简单的：
我们首先需要一个html文件：

MCP市场
MCP市场

中文MCP工具聚合与分发平台

MCP市场 211
查看详情 MCP市场
复制代码 代码如下:



input test







User Name:

PassWord:






下面加入jquery代码：
我使用了click 和blur内置事件类型处理，而且，只是对username框有效（因为密码框还有别的因素考虑）
复制代码 代码如下:



input test








User Name:

PassWord:






2.做的更好
这样基本的原型就写成了，但是这个原型有许多的不足:
1.也许可以对密码框也使用这种方式，但是密码框的type类型是password,它不能显示，何来提示文字？
2. if($(this).val()=="")这种写法我可以接受，但是 if($(this).val()=="Enter your name"),你不觉得这很...要是我就想输这个呢...
3.提示文字用别的灰色的粗体表示，这样交互性是不是更强？
4.既然想要用两种字体表示，能不能把他们提取出来？写在.css里？这个是可以重用的啊!

解决办法:
1.密码框先让它的type是text的，等到点击了，我们再设置成password
2.用个变量来表示是否要切换吧。
3.设置不同的css.
4.用attr("class","class1"),attr("class","class2")来切换class,而不是引用id.(也就是说用.不用#)
下面是实现:
复制代码 代码如下:



input test







User Name:

PassWord:






3.更多:
把css写到外部文件.
DRY原则!用插件来实现.
我在下一篇博客去实现.
author: aiqier

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：用JQuery 判断某个属性是否存在hasAttr的解决方法_jquery 下一篇：Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript如何实现桌面应用_Electron的工作原理是什么 Electron使JavaScript能开发桌面应用，其核心是主进程（Node.js，管理窗口和系统能力）与渲染进程（Chromium，负责UI），通过IPC通信；需main.js、index.html和package.json三文件启动，但存在体积大、内存高、安全配置复杂等代价。
2025-12-16 21:04:02
101
如何操作字符串_javascript字符串方法有哪些？ JavaScript字符串不可变，常用方法分四类：获取信息（如length、charCodeAt）、查找提取（如indexOf、slice）、转换格式（如toLowerCase、trim）、分割替换（如split、replace）。
2025-12-16 21:03:54
474
javascript中的变量提升是什么_它如何影响代码的执行顺序 JavaScript变量提升指声明被移至作用域顶部，但仅var声明初始化为undefined，let/const因TDZ在声明前访问报错，函数声明完全提升而表达式不提升。
2025-12-16 20:50:06
302
javascript_如何实现柯里化函数 柯里化是将多参数函数转换为单参数函数序列的技术，通过闭包递归收集参数，支持参数复用、延迟计算与函数组合，可扩展实现占位符机制提升灵活性。
2025-12-16 20:43:08
455
javascript循环有哪些_for循环和while循环怎么选择 JavaScript常用循环有5种：for适合次数明确或需索引的场景；while适合条件驱动、次数不确定的情况；do...while确保至少执行一次；for...in遍历对象可枚举属性（含原型链），需hasOwnProperty过滤；for...of遍历可迭代对象（如数组、Map），不适用于普通对象。
2025-12-16 20:39:07
419
javascript模板字面量是什么_它如何简化字符串拼接？ JavaScript模板字面量是ES6引入的用反引号包裹的字符串语法，支持变量插值、多行书写、任意表达式嵌入及标签函数高级功能，提升可读性与安全性。
2025-12-16 20:39:07
933
javascript动画如何实现_如何使用requestAnimationFrame？ requestAnimationFrame（rAF）是专为JavaScript动画设计的API，它在下一次屏幕重绘前执行回调，比setInterval更精准节能；需递归调用自身实现持续动画，并推荐基于时间戳计算位移以保障匀速。
2025-12-16 20:32:58
497
javascript错误如何捕获_try...catch语句怎样使用？ JavaScript错误可通过try...catch捕获运行时错误（如JSON解析失败、访问空对象属性等），但不能捕获语法错误或Promise异步错误（除非配合async/await）；其结构含try、catch和可选finally；常用于JSON.parse、DOM操作等场景，并支持通过error.name等属性做差异化处理。
2025-12-16 20:28:03
866
如何理解Javascript的宏任务与微任务？ 宏任务和微任务决定JavaScript事件循环执行顺序：同步代码执行完后先清空所有微任务，再执行下一个宏任务；宏任务包括script、setTimeout、用户事件等，微任务包括Promise.then、queueMicrotask等。
2025-12-16 20:26:02
685
如何用javascript实现实时通信_WebSocket基础是什么？ WebSocket是一种基于单个TCP连接的全双工通信协议，支持浏览器与服务器持续连接并互相主动发消息，适用于聊天、实时通知等场景；其通过HTTPUpgrade握手建立长连接，区别于HTTP的请求-响应模式；前端使用newWebSocket()创建连接，监听open、message、close、error事件，并用send()发送数据；后端需配套WebSocket服务（如Node.js的ws库、Python的websockets等）来处理连接管理、广播与鉴权。
2025-12-16 20:25:28
405
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部