Change from text box appearance to label appeareance according to the focus

Question

I have a template field in my gridview,this template field is a (text box).What i wanna to do is :After the user finished the writing and move to the next textbox , the one which lose the focus turned to be a label or like a label , and if it gets the focus again turn to be a text box.and ...etc

How to do some thing like this?

Answer 1

Like so :

<script type="text/javascript">
function show(){
document.getElementById("input1-label").style.display = "none";
document.getElementById("input1").style.display = "block";
document.getElementById("input1").focus();
}

function hide(){
if(document.getElementById("input1").value != "") document.getElementById("input1-label").innerHTML = document.getElementById("input1").value;
document.getElementById("input1-label").style.display = "block";
document.getElementById("input1").style.display = "none";
}
</script>

<label id="input1-label" onclick="show()" style="display:none">Label</label>
<input type="text" id="input1" onblur="hide()" />

http://jsfiddle.net/9v4TJ/1/