81,092
社区成员
发帖
与我相关
我的任务
分享jsp怎么在输入框中写默认提示信息
jsp怎么在输入框中写默认提示信息，当光标点击输入框时，提示信息消失，可供输入。弱输入框中为空，光标离去，默认提示信息又出现
效果类是于ExtJs的emptyText效果
效果类是于ExtJs的emptyText效果
...全文
请发表友善的回复…
发表回复
zx520913 2013-06-21
- 打赏
- 举报
最后是用的这个方法实现了效果
代码供参考：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>huangwei </title>
<script type="text/javascript">
//onclick="alert(this.innerText)"
function labelClick(){
var username=document.getElementsByName("username")[0];
var myLabel = document.getElementById("mylabel");
if(username.value==""){
myLabel.className="block3";//italic
}
username.focus();
}
function TextKeyUp(){
var myLabel = document.getElementById("mylabel");
var username = document.getElementsByName("username")[0];
if (username.value == "") {
myLabel.style.zIndex = 0;
myLabel.className="block3";//italic
}
else {
myLabel.style.zIndex = -2;
}
}
function TextKeydown(){
var myLabel = document.getElementById("mylabel");
myLabel.style.zIndex = -2;
}
function TextFocus(){
var myLabel = document.getElementById("mylabel");
var username = document.getElementsByName("username")[0];
if(username.value==""){
myLabel.style.zIndex = 0;
myLabel.className="block3";//italic
}else{
myLabel.style.zIndex = -2;
}
}
function TextBlur(){
var myLabel = document.getElementById("mylabel");
var username = document.getElementsByName("username")[0];
if(username.value==""){
myLabel.style.zIndex = 0;
myLabel.className="block2";
}
}
</script>
<style type="text/css">
.block1{
width:50xp;
height:20px;
padding:10px;
margin:5px;
background-color:#ffffff;
position:absolute;
left:15px;
top:30px;
z-index:-1;
}
.block2{
width:50xp;
height:16px;
padding:10px;
margin:5px;
background-color:#ffffff;
position:absolute;
left:20px;
top:32px;
font-weight:bolder;
color:#ACA899;
font-style:normal;
z-index:0;
}
.block3{
width:50xp;
height:16px;
padding:10px;
margin:5px;
background-color:#ffffff;
position:absolute;
left:20px;
top:32px;
color:#7e7e7e;
font-style:italic;
z-index:0;
}
</style>
</head>
<body>
<input type="text" name="username" class="block1" onkeyup="TextKeyUp();" onkeydown="TextKeydown();" onfocus="TextFocus();" onblur="TextBlur();" />
<label id="mylabel" class="block2" onclick="labelClick()" />
请输入用户名
</label>
</body>
</html>
梦想成空 2013-06-20
- 打赏
- 举报
query 获得焦点focus 失去焦点 blur
javascript 获得焦点onfocus 失去焦点 onblur
tony4geek 2013-06-20
- 打赏
- 举报
+1
小囧虎 2013-06-19
- 打赏
- 举报
jquery 获得焦点focus 失去焦点 blur
javascript 获得焦点onfocus 失去焦点 onblur
ZHOU西口 2013-06-19
- 打赏
- 举报
$(function(){
var n = $('#name');
n.val('请输入姓名');
n.focus(function(){
$(this).val('');
}).blur(function(){
$(this).val('请输入姓名');
})
});
菖蒲老先生 2013-06-19
- 打赏
- 举报
试试popHint看看。。。
