需求加强:比如 <p title="A detail introduction about your conference" id="introduction"> A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p>我想要点击<p>标签内容能够编程一个可输入区域;点击<p>标签之外的地方变回来原来的标签,并将输入的内容展现在标签内!!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <p title="A detail introduction about your conference" id="introduction"> A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p> <script> $(function () { $('#introduction').click(function () { $("#introduction").click(function (e) { if (e.target.tagName == 'TEXTAREA') return; var text = $(this).text(); $(this).html("<textarea id='txtIntroduction'>" + text + "</textarea>"); $("#txtIntroduction").css("width", "550px").css("height", "300px").blur(function () { $('#introduction').html(this.value); }) }); }); }); </script>
需求加强:比如 <p title="A detail introduction about your conference" id="introduction"> A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p>我想要点击<p>标签内容能够编程一个可输入区域;点击<p>标签之外的地方变回来原来的标签,并将输入的内容展现在标签内!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var text; $("#introduction").click(function(event) { event.stopPropagation(); text = $("#introduction").text(); $("#introduction").hide(); $("#txt").text(text); $("#txt").show(); }); $(document).click(function(event) { var event = event || window.event; if(event.target.id != "txt") { text = $("#txt").val(); $("#txt").hide(); $("#introduction").text(text); $("#introduction").show(); }
})
}) </script> </head>
<body> <p title="A detail introduction about your conference" id="introduction"> A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p> <textarea rows=5 cols=100 id="txt" style="display:none;">
写成这样???
需求加强:比如 <p title="A detail introduction about your conference" id="introduction">
A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p>我想要点击<p>标签内容能够编程一个可输入区域;点击<p>标签之外的地方变回来原来的标签,并将输入的内容展现在标签内!!
<p title="A detail introduction about your conference" id="introduction">
A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p>
<script>
$(function () { $('#introduction').click(function () {
$("#introduction").click(function (e) {
if (e.target.tagName == 'TEXTAREA') return;
var text = $(this).text();
$(this).html("<textarea id='txtIntroduction'>" + text + "</textarea>");
$("#txtIntroduction").css("width", "550px").css("height", "300px").blur(function () {
$('#introduction').html(this.value); })
});
});
});
</script>
需求加强:比如 <p title="A detail introduction about your conference" id="introduction">
A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p>我想要点击<p>标签内容能够编程一个可输入区域;点击<p>标签之外的地方变回来原来的标签,并将输入的内容展现在标签内!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var text;
$("#introduction").click(function(event) {
event.stopPropagation();
text = $("#introduction").text();
$("#introduction").hide();
$("#txt").text(text);
$("#txt").show();
});
$(document).click(function(event) {
var event = event || window.event;
if(event.target.id != "txt") {
text = $("#txt").val();
$("#txt").hide();
$("#introduction").text(text);
$("#introduction").show();
}
})
})
</script>
</head>
<body>
<p title="A detail introduction about your conference" id="introduction">
A smart thing can be endowed with different levels of intelligence, and may be context-aware, active, interactive, reactive</p>
<textarea rows=5 cols=100 id="txt" style="display:none;">
</textarea>
</body>
</html>