gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-11-01 04:33:03 25 4
gpt4 key购买 nike

我无意中在网上找到了这段代码,它解决了我的大部分问题,但是有一件事我想添加到这段代码中,但我不知道我的问题是什么,我怎样才能退出文本框在用户双击它之后还是在用户完成编辑之后?

    <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 事件设置一个监听器,当有问题的元素以外的其他元素收到点击时,该事件将触发:

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功能,它将取代 <td> <input> 时的内容触发它的 blur 事件:

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

此函数还重新分配了一个mouseup 事件监听器,因为它被设置为null。在AddInput功能。

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

如果是我的代码,我可能会使用 addEventListener 重写“标准”版本和 getAttribute()/setAttribute() ,然后使用其等效项创建仅用于 IE 的补救路径。或者,只需使用 jQuery 并让它为您完成所有跨浏览器的工作。

关于javascript - 单击单元格外部后如何退出文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13004833/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com