input 获取/失去焦点

最新推荐文章于 2025-05-25 17:04:35 发布

原创最新推荐文章于 2025-05-25 17:04:35 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 同时被 2 个专栏收录

43 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了三种不同的方式来实现HTML输入框的样式变化，包括默认提示文字、获取焦点及失去焦点的效果。第一种使用纯HTML和JavaScript，后两种则利用jQuery进行事件绑定，展示了不同技术在实现相同功能上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种写法：

<input type="text" value="请输入姓名" onblur="if(this.value==''){this.value='请输入姓名'}" onfocus="if(this.value=='请输入姓名'){this.value=''}"/>

第二种写法：

<input type="text" value="请输入姓名">
$("input").focus(function(){
     $(this).addClass("focus");
 });
 $("input").blur(function(){
     $(this).removeClass("focus");
 });

第三种写法：

//输入
$("input").on('input', function () {
   $(this).addClass("input");
})
//获取焦点
$("input").on('focus', function () {
   $(this).addClass("focus");
})
//失去焦点
$("input").on('blur', function () {
   $(this).removeClass("focus");
})