鼠标点击文本框文字消失离开还原

最新推荐文章于 2021-03-27 19:46:31 发布

平凡的Mac

最新推荐文章于 2021-03-27 19:46:31 发布

阅读量1.9k

点赞数

分类专栏： html4+(html5新特性) jquery javascript

本文链接：https://blog.csdn.net/anlukun/article/details/9569379

版权

javascript 同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

html4+(html5新特性)

9 篇文章 0 订阅

订阅专栏

方法(1) jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>点击文本框，提示说明字消失！</title>
<script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("TEXTAREA,input[focucmsg]") .each (function(){
$(this).val($(this).attr("focucmsg"));
$(this).val($(this).attr("focucmsg")).css("color","#979393");
$(this).focus(function(){
if($(this).val() == $(this).attr("focucmsg"))
{
$(this).val('');
$(this).val('').css("color","#6b6969");
}
});
$(this).blur(function(){
if(!$(this).val()){
$(this).val($(this).attr("focucmsg"));
$(this).val($(this).attr("focucmsg")).css("color","#979393");
}
});
});
});
</script>
<input name="" type="text" focucmsg="请输入关键字...？" />
<textarea style="width:150px; height:50px;" name="" cols="" rows="" focucmsg="把自己的心情写上来吧？"> </textarea>
</body>
</html>

方法(2) javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
<title>文本框点击时文字消失，失去焦点时文字出现 </title>

</head>
<body>
<input type="text" value="请输入您的姓名" id="myinput" />
</body>
</html>
<script language="JavaScript" type="text/javascript">
function addListener(element,e,fn){
if(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent("on" + e,fn);
}
}
var myinput = document.getElementById("myinput");
addListener(myinput,"click",function(){
myinput.value = "";
})
addListener(myinput,"blur",function(){
myinput.value = "请输入您的姓名";
})
</script>