单击可编辑文本框,回车确认内容

来源:互联网 发布:基于thinkphp的cms开发 编辑:程序博客网 时间:2024/06/07 06:39

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""HTML://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTMLxmlns="HTML://www.w3.org/1999/xHTML">
<head>
<meta HTML-equiv="Content-Type" content="text/HTML;charset=gb2312" />
<title>单击后编辑文字</title>
<style>
input.t {border:1px solid #fff;}
</style>
</head>
<body >
<input class="t" id="test" readonly value="点击我看看效果"/>

<scripttype="text/javascript">
var test = document.getElementById("test");
test.onclick = function()
{
 this.readOnly = false;
 this.className = "s";
}

document.onkeydown=function(event){
           var e = event || window.event ||arguments.callee.caller.arguments[0];
           if(e && e.keyCode==27){ // 按Esc
               //要做的事情
             }
           if(e && e.keyCode==113){ // 按F2
                //要做的事情
                        
            if(e && e.keyCode==13){ // enter键
                test.readOnly = true;
                test.className = "t";
           }
       }


</script>
</body>
</HTML>

原创粉丝点击