<div onkeydown="if(event.keyCode==23){hideTxtPane();}" id="divTxtPane" style="border:solid 2px black; background-color:white; display:none;position:absolute; left:97px; top:100px; z-index:1">
  <table>
  <tr><td colspan=2><textarea onkeydown="if(event.keyCode==23){hideTxtPane();}"   id="commentEditor" style="height:50px; width:200px" name="textfield"></textarea></td></tr>
  <tr>
	<td><input style="width:90px;border:solid 1px black;background-color:white;cursor:pointer;"  name="btOk" value="OK" type="button" onClick="applyText();" ></td>
	<td><input style="width:90px;border:solid 1px black;background-color:white;cursor:pointer;"  name="btCancel" value="Cancel" type="button" onClick="hideTxtPane();" onblur="hideTxtPane()"></td>
  </tr>
  </table>  
</div>

<input type="text"  onKeyDown="showTxtPane(this.parentNode.childNodes(0));" value="This is sample text..">

// Here is the code.
var targetNode;
function showTxtPane(_targetNode){
	//enter or mouse clicked.
	if(event.keyCode != 13 && event.keyCode !=0) return;
	//event.cancelBubble = true;
	targetNode = _targetNode;
	targetNode.style.backgroundColor="yellow";
	var div = document.getElementById("divTxtPane");
	var txtEditor = document.getElementById("commentEditor");

	var screenY = document.body.offsetHeight
	var screenX = document.body.offsetWidth;
	div.style.left =  (screenX - div.style.width) / 2;
	div.style.top = (screenY - div.style.height) / 2;
	

	div.style.display = "";
// if I don't put focus, it woks ok. But I have to put the focus!!
	txtEditor.focus();
	txtEditor.innerText = targetNode.value;
	txtEditor.select();
}