input属性点击批改内容 _Web前端

input属性点击修改内容

看上去内容不可修改，但点击进去后就可以修改

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>演示</title>
<meta name="author" content="MarVel" />
<script type="text/javascript">
function focus(){
var text=document.getElementById("text");
text.onfocus=function(){
   //text.value="";
   text.className="focus";
}
text.onblur=function(){
   if (text.value==""){
    text.value="更新失败"
   }
   text.className="";
   //alert(text.value);
}
}
window.onload=focus;
</script>
<style type="text/css">
input {border:1px solid #fff; font-size:14px; width:20em;}
.focus {border:1px solid #333; font-size:12px; line-height:14px; width:20em;}
label {vertical-align:middle;}
</style>
</head>
<body>
<div><input id="text" type="text" maxlength="20" value="点我更新内容" /></div>
</body>
</html>