jQuery应用－实现文本框获取焦点时改变样式

最新推荐文章于 2022-03-11 19:51:36 发布

yxp200402

最新推荐文章于 2022-03-11 19:51:36 发布

阅读量1.2k

点赞数

分类专栏： C# 文章标签： jquery input javascript function border

C# 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

用户在输入文字时，如果能高亮显示正在输入的那个文本框的话，会更人性化些，下面就使用jQuery来实现。
实现原理：
在document加载完成后(ready)，添加input的focus和blur事件，并进行增加和删除样式的操作。
代码示例：
<html>
<head><title></title>
<style type="text/css">
.redBack{}{
color:white;
background:red;
border:2px solid black;
}
</style>
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).addClass('redBack');
//alert("hello");
});
$('input').blur(function(){
$(this).removeClass('redBack');
});
});
</script>
</head>
<body>
<input type="text" value="hello,shanzhu" id="myText">
<input type="text" value="hello,shanzhu" id="myText2">
<input type="text" value="hello,shanzhu" id="myText3">
<input type="text" value="hello,shanzhu" id="myText4">
<input type="text" value="hello,shanzhu" id="myText5">
<input type="text" value="hello,shanzhu" id="myText6">
</body>
</html>
说明：
$(this)表示正在操作的对象。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yxp200402

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery应用－实现文本框获取焦点时改变样式

用户在输入文字时，如果能高亮显示正在输入的那个文本框的话，会更人性化些，下面就使用jQuery来实现。实现原理：在document加载完成后(ready)，添加input的focus和blur事件，并进行增加和删除样式的操作。代码示例： .redBack{}{ color:white; background:red;
复制链接

扫一扫