<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.ipt{width:500px;position:fixed;left:500px;top:100px;}
.input{color:#a8a8a8;}
</style>
</head>
<body>
<div id="d1">
<p>123</p>
</div>
<div class="ipt">
<input class="input" type="ipnut" value="请输入内容..."/>
<input type="button" value="添加"/>
<input type="button" value="删除"/>
</div>
<script type="text/javascript">
var btnI=document.getElementsByTagName('input')[0];
var btnC=document.getElementsByTagName('input')[1];
var btnR=document.getElementsByTagName('input')[2];
var d1=document.getElementById('d1');
/*input效果-开始*/
//获取焦点
btnI.onfocus=function(){
if(btnI.getAttribute('value')=="请输入内容..."){
btnI.setAttribute("value","");
btnI.style.color="#000";
}
}
//失去焦点
btnI.onblur=function(){
if(btnI.getAttribute('value')==""){
btnI.setAttribute("value","请输入内容...");
btnI.style.color="#a8a8a8";
}else{
var txt=btnI.getAttribute("value");
btnI.setAttribute("value",txt);
btnI.style.color="#000";
}
}
/*input效果-结束*/
btnC.onclick=function(){
var p=document.createElement('p');
var txt=document.createTextNode();
p.appendChild(txt);
d1.appendChild(p);
}
</script>
</body>
</html>
我想实现的效果是,等输入框失去焦点时,input的value值为你输入的内容,但这里input的值一直为空
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.ipt{width:500px;position:fixed;left:500px;top:100px;}
.input{color:#a8a8a8;}
</style>
</head>
<body>
<div id="d1">
<p>123</p>
</div>
<div class="ipt">
<input class="input" type="text" placeholder="请输入内容..."/>
<input type="button" value="添加"/>
<input type="button" value="删除"/>
</div>
<script type="text/javascript">
var btnI=document.getElementsByTagName('input')[0];
var btnC=document.getElementsByTagName('input')[1];
var btnR=document.getElementsByTagName('input')[2];
var d1=document.getElementById('d1');
/*input效果-开始*/
//获取焦点
// btnI.onfocus=function(){
// if(btnI.getAttribute('placeholder')=="请输入内容..."){
// btnI.setAttribute("value","");
// btnI.style.color="#000";
// }
// }
//失去焦点
btnI.onblur=function(){
if(btnI.value==""||btnI.value==null){
btnI.value="请输入内容...";
btnI.style.color="#a8a8a8";
}else{
var txt=btnI.value;
btnI.value=txt;
btnI.style.color="#000";
}
}
/*input效果-结束*/
btnC.onclick=function(){
var node=document.createElement('p');
var textnode=document.createTextNode(btnI.value);
node.appendChild(textnode);
d1.appendChild(node)
}
</script>
</body>
</html>
当然为空啊,你给它添加了吗?
要这个效果你用placeholder不就好了?
根本就不需要那么搞,像楼上说的
<input class="input" type="ipnut" value="" placeholder=“请输入内容...”/>
就一个简单的功能,根本不需要事件来控制
按楼上几位说的用placeholder就好了,如果非要自己写的话,不要用getAttribute来获取value ,直接用elem.value就好