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

时间：2023-08-07

本文介绍了在单元格外单击后如何退出文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

这篇关于在单元格外单击后如何退出文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：使用 CSS 在文本框中居中文本(垂直) 下一篇：如何创建 Facebook 状态箭头文本框?

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

问题描述

推荐答案

相关文章

最新文章