jQuery如何实现一个显示数字，双击后变成可输入框？
一个div，里面显示一个数字，双击后变成可输入框，可修改数字，然后鼠标移除输入框，又变成一个只显示的div，框隐藏，请问怎么实现？...
一个div，里面显示一个数字，双击后变成可输入框，可修改数字，然后鼠标移除输入框，又变成一个只显示的div，框隐藏，请问怎么实现？
展开
4个回答
展开全部
说一下思路啊，把输入框和div重叠放在一起！通过控制div和输入框的display的block和none来控制，当然div中显示的数字要和文本框录入的数字同步起来！
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div contentEditable>数字</div>
不需要使用jq，直接用Html5中新增加的contentEditable属性即可实现在线编辑，你可以测试一下，非常实用的效果。
不需要使用jq，直接用Html5中新增加的contentEditable属性即可实现在线编辑，你可以测试一下，非常实用的效果。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<script type="text/javascript" src="
<script type="text/javascript">
$(document).ready(function(){
$("#div_input").dblclick(function(){
$("#text_input").val($("span").html());
$("span").hide();
$("#text_input").show().focus();
});
$("#text_input").mouseout(function(){
$("span").html($(this).val()).show();
$("#text_input").hide();
});
});
</script>
</head>
<body>
<div id="div_input" style="width:152px;height:22px;border:1px solid #369;">
<span>12</span>
<input id="text_input" style="border:0;display:none;" />
</div>
</body>
</html>
追问
如果div的id不确定怎么操作？
追答
具体点，贴下html
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery:
$(document).ready(function(){
$("#div_input").dblclick(function(){
$("#text_input").val($("span").html());
$("span").hide();
$("#text_input").show();
$("#text_input").focus();
});
$("#text_input").mouseout(function(){
$("span").html($(this).val());
$("span").show();
$("#text_input").hide();
});
});
html:
<div id="div_input" style="width:152px;height:22px;border:1px solid #369;">
<span>12</span>
<input id="text_input" style="border:0;display:none;" />
$(document).ready(function(){
$("#div_input").dblclick(function(){
$("#text_input").val($("span").html());
$("span").hide();
$("#text_input").show();
$("#text_input").focus();
});
$("#text_input").mouseout(function(){
$("span").html($(this).val());
$("span").show();
$("#text_input").hide();
});
});
html:
<div id="div_input" style="width:152px;height:22px;border:1px solid #369;">
<span>12</span>
<input id="text_input" style="border:0;display:none;" />
追问
如果div的id不确定怎么操作？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
