jquery - フォーカスに応じて、テキストボックスの外観からラベルの外観に変更します

Question

テンプレートgridviewフィールドがあります。このテンプレートフィールドは（テキストボックス）です。ユーザーが書き込みを終了して次のテキストボックスに移動した後、フォーカスを失ったものがラベルまたはラベルのように、そしてそれが再びフォーカスを得るならば、テキストボックスに変わります。そして...など

このようなことをする方法は？

Answer 1

インライン編集を検索します。

これが使用できるjQueryインライン編集ですが、Googleで詳細を見つけることができます。

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

とライブデモ

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

ただし、データベースの更新方法を完全に変更する必要があります。

Answer 2

そのようです ：

<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/