在单元格外部单击后如何退出文本框 [英] how to exit text box after clicking outside the cell
问题描述
我无意间在网上找到了这段代码，它已经解决了我的大部分问题，但是我想在此代码中添加一件事，但是我不知道我的问题是什么，我如何退出文本框用户双击它之后还是完成编辑之后?
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 函数，该函数将在< input> 时替换< td> 的内容>触发其 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.
这篇关于在单元格外部单击后如何退出文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
