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

2022-01-13 00:00:00 textbox exit-code javascript

我不小心在网上找到了这段代码，它解决了我的大部分问题，但是我想在这段代码中添加一件事，但我不知道我的问题是什么，我该如何退出文本框在用户双击它之后还是在用户完成编辑之后?

I accidentally found this code on the web and it has solved most of my problem, however there is one thing that i want to add to this code but i don't know how my question is, how can i exit the textbox after a user has double clicked it or after the user has finished editing it? 

    <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>

推荐答案

首先，修改AddInput，为blur事件设置监听器，当有问题的元素以外的东西收到点击:

First, modify AddInput in order to set a listener for the blur event, which will fire when something other than the element in question receives a click:

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 函数，当 时，该函数将替换 的内容> 触发它的 blur 事件:

Then, you can add a new removeInput function, which will replace the <td>'s content when the <input> fires its blur event:

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

此函数还重新分配 mouseup 事件侦听器，因为它在 AddInput 函数中设置为 null.

This function also reassigns a mouseup event listener, since it gets set to null in the AddInput function.

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

Keep in mind that while this worked for me in Chrome 22, it will probably require a bit of extra effort to test and fix whatever cross-browser issues might exist with inline event and attribute assignments.

如果是我的代码，我可能会使用 addEventListener 和 getAttribute()/setAttribute() 重写标准"版本，然后使用它的等价物制作一个补救性的仅限 IE 的路径.或者，只需使用 jQuery，让它为您完成所有跨浏览器的工作.

If it were my code, I'd probably rewrite the 'standard' version using addEventListener and getAttribute() / setAttribute(), and then make a remedial IE-only path using its equivalents. Or, just use jQuery and let it do all the cross-browser stuff for you.

相关文章