html
<ul id="a">
<li>这里需要编辑</li>
<li><a href="javascript:void(0);" class="b">编辑</a></li>
</ul>
有没有一种方法
使点击了“编辑”以后,“这里需要编辑”变成文本框input那种输入模式。
然后鼠标离开后,自动保存

解决方案 »

  1.   

    <ul id="a">
    <li><span id="s">这里需要编辑</span><input type="text" id="t" style="display:none" onblur="ee()"/></li>
    <li><a href="javascript:void(0);" class="b" onclick="se()">编辑</a></li>
    </ul><script type="text/javascript">
    var ss = document.getElementById("s");
    var tt = document.getElementById("t");se = function(){
    tt.value = ss.innerHTML;
    ss.style.display = "none";
    tt.style.display = "block";
    }ee = function(){
    ss.innerHTML = tt.value;
    tt.style.display = "none";
    ss.style.display = "block";}</script>
      

  2.   

    3L的·,我试了下,好像不行能不能JQ写
      

  3.   

    双击li即可编辑<ul id="a">
    <li contentEditable="true">这里需要编辑</li>
    <li><a href="javascript:void(0);" class="b">编辑</a></li>
    </ul><script type="text/javascript"></script>
      

  4.   

    代码我测试过的,你是有什么错误现象。JQuery你自己写就行了,有了原生JS的还写不出来JQuery。
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body><ul id="a">
    <li>这里需要编辑</li>
    <li><a href="javascript:void(0);" class="b">编辑</a></li>
    </ul><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    var li = $("#a>li:first");
    var a = $("#a a");
    a.click(function(){
    li.attr("contentEditable",true)
    });
    li.mouseout(function(){
    li.attr("contentEditable",false)
    })
    })
    </script>
    </body>
    </html>
      

  6.   

    请你新建一个空白的HTML文档保存这些代码,然后用chrome测试