CODEWITHSUNDEEP
jqueryasp.netcssgridviewtemplatefield
Anyname Donotcare
Anyname Donotcare

Reputation: 11403

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

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?

Upvotes: 0

Views: 2753

Answers (2)

bogatyrjov
bogatyrjov

Reputation: 5378

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/

Upvotes: 1

Aristos
Aristos

Reputation: 66641

You search for an inline editing.

here is a jQuery inline editing that you can use, but you can find more on google.

http://yelotofu.com/2009/08/jquery-inline-edit-tutorial/

and a live demo

http://yelotofu.com/labs/jquery/snippets/inlineEdit/demo_final.html

How ever you need to fully change your way of update your database.

Upvotes: 2

Related Questions