这篇博客探讨了JavaScript中输入框的焦点事件处理，当文本框获取或失去焦点时如何改变其样式。通过jQuery实现点击按钮聚焦文本框并改变其颜色和边框，失去焦点时若内容为空则恢复默认样式。
*{margin:0;padding:0;}
ul li{ list-style:none;}
img {border:0 none;}
body {padding:100px;}
input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;}
p{color:#f00;}
div{ height:30px; color:#000;}
.c1{ border:1px red solid;}
input[type='text']{width:200px; height:24px; line-height:30px;padding:3px; color:#bbb; border:1px gray solid;}
$(function(){
$("input[type='button']").focus().click(function(){
})
$("input[type='text']").focus(function(){
var text_val=$(this).val();
if(text_val==this.defaultValue){ // this指向文本框，“this.defaultValue”就是当前文本框一开始的默认值
$(this).val('').css({
color:'green',
border:'1px green solid'
});
}
}).blur(function(){
var text_val=$(this).val();
if(text_val==''){
$(this).val(this.defaultValue).css({
color:'red',
border:'1px red solid'
});
}
})
})
输入E-mail:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
