Jquery div 到文本框 onclick 并返回到 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16743679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery div to textbox onclick and back to div
提问by user1977434
If you have been on the new PHP myadmin you can click on a field and edit it then when you click away it changes back to a div, I thought this could be found on the web easy but aprently not, so I tryed to make it and I'm not very good with javascript so I failed. Heres what i got so far.
如果你使用过新的 PHP myadmin 你可以点击一个字段并编辑它然后当你点击它时它会变回一个 div，我认为这可以在网上很容易找到，但显然不是，所以我试着让它而且我对 javascript 不是很好，所以我失败了。这是我到目前为止所得到的。
HTML:
HTML：
<td id="td_1"><input type="hidden" value="0" />0</td>
Javascipt:
Javascipt：
$("#td_1").click(function() {
$input = $("#td_1");
$field = $('<input type="text" id="txt_1" maxlength="1" size="1"/>').attr({
id: $input.id,
name: $input.name,
value: $input.val()
});
$input.after($field).remove();
});
It adds the textbox but does not add the value to it, and stuck on how to change it back
它添加了文本框但没有向其添加值，并坚持如何将其改回
Thanks for any help :)
谢谢你的帮助 ：）
回答by cfs
I would have a hidden textbox that you show when you click on the text value. Working example
当您单击文本值时，我会显示一个隐藏的文本框。工作示例
HTML
HTML
<td id="td_1"><input id="txtBox" type="textbox" value="0" style="display:none;" /><span id="txtBoxValue">0</span></td>
jQuery
jQuery
$(function() {
$('#txtBoxValue').on('click', function() {
$(this).hide(); //hide text
$('#txtBox').show(); //show textbox
});
$('#txtBox').on('blur', function() {
var that = $(this);
$('#txtBoxValue').text(that.val()).show(); //updated text value and show text
that.hide(); //hide textbox
});
});
回答by Logar314159
Try this fiddle, it works on multiple span's and input's.
试试这个小提琴，它适用于多个span's 和input's。
<div class="editDIV">
<span class="editESPAN" style="display:block;">asd</span>
<input class="editINPUT" style="display:none;" type="text"/>
</div>
<div class="editDIV">
<span class="editESPAN" style="display:block;">asd</span>
<input class="editINPUT" style="display:none;" type="text"/>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".editDIV").click(function(){
$(this).find("span")[0].style.display="none";
$(this).find("input")[0].style.display="block";
$(this).find("input")[0].focus();
});
$(".editINPUT").blur(function(){
$(this)[0].style.display="none";
$(this).prev()[0].innerText=$(this)[0].value;
$(this).prev().show();
});
});
</script>
回答by Faishal
$("#td_1").click(function() {
$input = $("#td_1");
$field = $('<input type="text" id="txt_1" maxlength="1" size="1"/>').attr({
id: $input.id,
name: $input.name,
value: $input.text()
});
$input.after($field).remove();
});
