textarea文本框添加提示背景

陪读母亲 2019-11-18 112 阅读

大家可能见过这样的效果,一个文本框带有背景图片。
通常背景图片上带有提示语,当点击文本框的时候,这个背景图片就会消失。
算是比较人性化和美观的效果,本章节通过代码实例介绍一下如何实现此效果。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>乐分享</title>
<style type="text/css">
.bg{
background:#F5FAFE url(mytest/html/004.gif) no-repeat right bottom;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var text=document.getElementById("text");
text.onfocus=function(){text.className="";}
text.onblur=function(){
if(text.value==""){
text.className="bg";
}
}
}
</script>
</head>
<body>
<textarea rows="7" cols="80" id="text" class="bg">

最新游戏