您的位置：首页 > Web前端 > JavaScript

双击文字出现编辑文本框的JS代码，并可编辑成功

2015-01-11 20:24 429 查看

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>双击文本实现编辑</title>

<style>

input.a {border:1px solid #fff;background:#fff;}

input.b {border:1px solid #369;background:#fff;}

</style>

</head>

<body>

<input class="a" id="test" readonly value="点我一下可以编辑我" type="text" /><input type="submit" value="提交修改" style="display:none;" id="submit" />

<script type="text/javascript">

var test = document.getElementById("test");

var mysubmit = document.getElementById("submit");

test.ondblclick = function()

{

this.readOnly = false;

this.className = "b";

mysubmit.style.display = "";

}

mysubmit.onclick = function()

{

test.readOnly = true;

test.className = "a";

this.style.display = "none";

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航