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

在js(jquery)中获得文本框焦点和失去焦点的方法_javascript技巧

php中文网
发布： 2016-05-16 17:47:15
原创
1846人浏览过

先来看javascript的直接写在了input上

易笔AI论文
易笔AI论文

专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

易笔AI论文 103
查看详情 易笔AI论文
复制代码 代码如下:




jquery实现方法

对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。
如：
复制代码 代码如下:

$("p").focus(); 或$("p").focus(fn)

blur()：失去焦点时使用，和onblur一样。
如：
复制代码 代码如下:

$("p").blur(); 或$("p").blur(fn)

实例
复制代码 代码如下:


这里label覆盖在文本框上，可以更好的控制样式




jquery代码
复制代码 代码如下:

$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神马？');
});
})

好了相当的不错吧

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：Javascript获取窗口(容器)的大小及位置参数列举及简要说明_基础知识 下一篇：定义JavaScript二维数组采用定义数组的数组来实现_基础知识
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
优化JavaScript按钮状态管理：使用事件委托实现简洁高效的代码 本教程旨在解决前端开发中管理多个交互式按钮状态时代码冗余的问题。通过引入事件委托（EventDelegation）这一核心概念，我们将展示如何将针对每个按钮的重复事件监听器，重构为一个单一、高效的事件处理器，从而大幅提升代码的可维护性、可扩展性和性能，尤其适用于按钮数量众多或动态生成的场景。
2025-11-22 11:34:35
525
深入理解React列表渲染中的Key：避免“相同Key”警告 本文旨在深入探讨React中列表渲染时key属性的重要性及其正确使用方法。我们将详细解释为何React需要唯一的key来高效更新列表，分析使用数组索引作为key的潜在问题，并提供基于稳定唯一标识符的解决方案，以避免“Encounteredtwochildrenwiththesamekey”警告，确保组件在更新时的身份识别和性能优化。
2025-11-22 11:25:02
468
JavaScript数据可视化_D3.js图表库实战 D3.js是数据可视化的强大工具，提供对HTML、SVG和CSS的精细控制，支持数据绑定、动态生成元素与复杂交互动画。通过引入库、准备数据与容器、绑定数据并绘制元素，可快速实现柱状图；结合比例尺、坐标轴生成器及过渡动画，能增强图表表现力。注意更新机制、边距规范与响应式重绘，推荐在复杂项目中结合React等框架使用，虽学习曲线陡峭，但几乎可实现任意自定义可视化效果。
2025-11-22 11:19:03
417
React应用中利用useParams提取URL路径段 本文详细介绍了在React应用中，如何利用react-router-dom库提供的useParamsHook，从URL路径中高效、准确地提取特定字符串段。通过定义带有命名参数的路由，开发者可以轻松获取如/Test/marks路径中的Test部分，从而实现基于URL路径的动态内容渲染或数据匹配，避免了手动解析useLocation对象和正则表达式的复杂性，极大地简化了路径参数的处理流程。
2025-11-22 11:16:53
837
TypeScript 中如何定义具有可选键的嵌套映射类型 本文探讨了在TypeScript中定义具有可选键的嵌套对象类型的方法。当需要创建一个对象，其键值来源于预定义的类型集合，但并非所有可能的键都必须存在时，传统的映射类型会导致编译错误。通过引入TypeScript的映射修饰符?，我们可以轻松地将这些键标记为可选，从而实现更灵活和健壮的类型定义。
2025-11-22 11:14:02
343
React Router v6：Props传递与路由状态管理深度解析 本文深入探讨了ReactRouterv6中组件Props的传递机制与路由状态的管理方式。RRDv6废弃了v5中的“路由Props”，转而采用一系列ReactHooks（如useNavigate、useLocation等）来访问路由相关状态。同时，文章详细解释了Route组件的element属性应直接接收JSX元素，而非返回JSX的函数，并提供了正确传递自定义Props和访问路由状态的示例代码，旨在帮助开发者高效地构建React应用。
2025-11-22 11:10:02
369
JavaScript 教程：高效计算逗号分隔数字的乘积 本教程详细介绍了如何使用JavaScript高效计算逗号分隔数字字符串或数字数组的乘积。通过结合split()方法将字符串转换为数组，以及reduce()方法对数组元素进行累积乘法运算，您可以轻松实现这一功能。文章提供了清晰的代码示例和注意事项，帮助您在实际开发中灵活应用。
2025-11-22 11:07:55
340
JavaScript函数返回值：理解与实践 twoSum 算法中的常见陷阱 本文深入探讨JavaScript函数返回值机制，通过分析一个常见的twoSum算法实现，揭示函数内部变量无法在外部访问的根源。我们将详细讲解return语句的关键作用，并提供代码示例，帮助开发者避免因缺少返回值而导致的undefined结果，确保函数行为符合预期。
2025-11-22 11:06:02
179
JavaScript工厂模式_对象创建最佳实践 工厂模式是一种通过函数封装对象创建逻辑的设计模式，无需使用new关键字即可批量生成具有相似结构的对象。它提升了代码的封装性、可复用性和维护性，适用于需灵活创建对象且不依赖继承的场景，如配置系统或组件初始化，相比构造函数更简洁安全。
2025-11-22 11:03:05
209
优化CSS按钮悬停过渡效果：实现平滑涟漪动画的JavaScript与CSS实践 本文深入探讨了如何优化HTML按钮的悬停过渡效果，特别是实现动态涟漪动画时可能遇到的问题。我们将分析JavaScript中的变量声明和事件绑定，并结合CSS的伪元素与自定义属性，确保按钮在鼠标悬停和移出时都能展现出流畅、预期的动画效果，并提供更健壮的CSS实现方案。
2025-11-22 10:56:02
398
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部