問題描述
我不小心在網(wǎng)上找到了這段代碼，它解決了我的大部分問題，但是我想在這段代碼中添加一件事，但我不知道我的問題是什么，我該如何退出文本框在用戶雙擊它之后還是在用戶完成編輯之后?
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事件設(shè)置監(jiān)聽器，當(dāng)有問題的元素以外的東西收到點(diǎn)擊:
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;
}
然后，您可以添加一個(gè)新的 Then, you can add a new 此函數(shù)還重新分配 mouseup 事件偵聽器，因?yàn)樗? This function also reassigns a mouseup event listener, since it gets set to 請(qǐng)記住，雖然這在 Chrome 22 中對(duì)我有用，但可能需要一些額外的努力來測(cè)試和修復(fù)內(nèi)聯(lián)事件和屬性分配可能存在的任何跨瀏覽器問題. 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. 如果是我的代碼，我可能會(huì)使用 If it were my code, I'd probably rewrite the 'standard' version using 這篇關(guān)于在單元格外單擊后如何退出文本框的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！removeInput 函數(shù)，當(dāng) 時(shí)，該函數(shù)將替換 的內(nèi)容> 觸發(fā)它的 blur 事件:
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); };
}
AddInput 函數(shù)中設(shè)置為 null.null in the AddInput function.addEventListener 和 getAttribute()/setAttribute() 重寫標(biāo)準(zhǔn)"版本，然后使用它的等價(jià)物制作一個(gè)補(bǔ)救性的僅限 IE 的路徑.或者，只需使用 jQuery，讓它為您完成所有跨瀏覽器的工作.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.相關(guān)文檔推薦