Menu
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>
224
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;
}
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); };
}
This function also reassigns a mouseup event listener, since it gets set to null in the AddInput function.
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.
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.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
