如何退出文本框后单击单元格外

我意外地在网络上找到了这段代码，它已经解决了我的大部分问题，但有一件事是我想要添加到此代码，但我不知道如何我的问题是，如何在用户双击后或用户完成编辑后退出文本框？如何退出文本框后单击单元格外

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
    <title></title> 
    <script type="text/javascript"> 
    /*<![CDATA[*/ 
    function INPUT(id){ 
    var obj=document.getElementById(id),tds=obj.getElementsByTagName('TD'),z0=0,ip,html; 
    for (;z0<tds.length;z0++){ 
    tds[z0].onmouseup=function(){ AddInput(this); } 
    } 
    } 

    function AddInput(td){ 
    var ip=zxcAddField('INPUT','text',''); 
    ip.value=td.innerHTML; 
    td.innerHTML=''; 
    td.appendChild(ip); 
    td.onmouseup=null; 
    } 

    function zxcAddField(nn,type,nme){ 
    var obj; 
    try { 
    obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >'); 
    } 
    catch(error){ 
    obj=document.createElement(nn); 
    if (type){ 
    obj.type=type; 
    } 
    obj.name=nme||''; 
    } 
    return obj; 
    } 


    /*]]>*/ 
    </script> 
    <script type="text/javascript"> 
    /*<![CDATA[*/ 

    function Init(){ 
    INPUT('tst'); 
    } 

    if (window.addEventListener){ 
    window.addEventListener('load',Init, false); 
    } 
    else if (window.attachEvent){ 
    window.attachEvent('onload',Init); 
    } 

    /*]]>*/ 
    </script> 
    </head> 

    <body> 
    <table id="tst" border="1"> 
    <tr width="200"> 
    <td>some html</td> 
    </tr> 
    </table> 
    </body> 

    </html>

来源

2012-10-22 roseanne

更适合你使用jquery –

你是什么意思退出文本框？ – polin

感谢您的回复...当用户完成编辑文本框中的值时，文本框应该消失，编辑后的文本将只显示.. – roseanne

首先，修改AddInput，以便在比有问题的元素以外的东西获得的点击来设置模糊事件，这会激发听众：

function AddInput(td){ 
    var ip=zxcAddField('INPUT','text',''); 
    ip.value=td.innerHTML; 
    ip.onblur = function() { removeInput(ip); }; 
    td.innerHTML=''; 
    td.appendChild(ip); 
    td.onmouseup=null; 
}

然后，可以添加一个新的removeInput功能，当<input>触发模糊时，将替换<td>的内容事件：

function removeInput(input) { 
    var val = input.value; 
    var td = input.parentNode; 
    td.removeChild(td.lastChild); 
    td.innerHTML = val; 
    td.onmouseup = function() { AddInput(td); }; 
}

这个功能也重新分配一个鼠标松开事件侦听器，因为它得到的AddInput功能设置为null。

请记住，虽然这在Chrome 22中适用于我，但它可能需要一些额外的努力来测试和修复内联事件和属性分配中可能存在的任何跨浏览器问题。

如果它是我的代码，我可能会重写使用addEventListener和getAttribute()/setAttribute()“标准”的版本，然后让使用它的当量补救IE-唯一路径。或者，只需使用jQuery，让它为您完成所有跨浏览器的工作。

来源

2012-10-22 06:48:39 cml

它现在可以工作了......再次感谢.. :) – roseanne

再次嗨！你提供的代码真的很有帮助..所以，我想问另一个如果没关系...我想单元格出现在文本框自动保存新值直接在数据库表..我知道这是可能，但我不知道如何开始再次感谢^^， – roseanne

如何退出文本框后单击单元格外

回答

相关问题