javascript - 这个为什么鼠标移除后,input的value为空而不是你输入的内容
本文介绍了javascript - 这个为什么鼠标移除后,input的value为空而不是你输入的内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!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>
这篇关于javascript - 这个为什么鼠标移除后,input的value为空而不是你输入的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文