不用ajax实现点击文字即可编辑的方法

最新推荐文章于 2024-11-17 20:27:30 发布

hqbobo

最新推荐文章于 2024-11-17 20:27:30 发布

阅读量335

点赞数

分类专栏： javascript技术文章标签： ajax class div input border function

javascript技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body{font-size:14px;}
input{border:none;font-size:14px;}
.show{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;}
.hide{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;display:none;}
</style>
<script language="javascript">

</script>
</HEAD>
<BODY>

<font color=red><b>在firefox下由于DOM有很小的差异，含有input的div中除标签内的空格外</b></font>

<font color=red><b>不能有空格因为我们用的是childNodes[0]!否则需要点两下！</b></font>
<div>
<div class="show" id="test" οnclick="edit(this.id)">可编辑的内容一</div>
<div class="hide" id="testfm"><input type="text" name="nn" value="可编辑的内容一" onBlur="hide(this.parentNode.id)" /></div>
<div class="show" id="test1" οnclick="edit(this.id)">可编辑的内容二</div>
<div class="hide" id="test1fm"><input type="text" name="nn" value="可编辑的内容二" onBlur="hide(this.parentNode.id)" /></div>
<div class="show" id="test2" οnclick="edit(this.id)">可编辑的内容三</div>
<div class="hide" id="test2fm">
    <input type="text" name="nn" value="可编辑的内容三" onBlur="hide(this.parentNode.id)" >
</div>
<div class="show" id="test3" οnclick="edit(this.id)">可编辑的内容四</div>
<div class="hide" id="test3fm">
    <input type="text" name="nn" value="可编辑的内容四" onBlur="hide(this.parentNode.id)" >
</div>
</div>
</BODY>
</HTML>