javascript - 点击页面任意一个地方获取到文本框内容并替换

点击上述图片中红框里的位置可以替换成input文本框如下图

第一个问题来了，如何控制实现一个页面中只能出现一个文本框呢？点击一图中的其他三个位置不完成替换;

第二个问题：我点击页面的任意一个位置，实现获取到文本框中的值并替换掉当前，还是看图吧

做完这些之后，再点击一图其他位置进行上述操作;

附上部分代码，不完整；

<code>
&lt;tr&gt;
      &lt;td colspan="9"&gt;采样日期:&lt;span name="date" onclick="replace_input(this)"&gt;2016.317&lt;/span&gt;            天气: &lt;span onclick="replace_input(this)"&gt;_________&lt;/span&gt;             温度:&lt;span onclick="replace_input(this)"&gt;__________℃&lt;/span&gt;                      湿度&lt;span onclick="replace_input(this)"&gt;______%&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;script type='text/javascript'&gt;
function replace_input(e) {
    $(e).replaceWith("&lt;input type='text' value=''/&gt;");
    
}
&lt;/script&gt;</code>

---------------------------分割线-----------------------------

很失望，盼了一晚还是没有等到自己想要的答案，不知道是我描述不清楚还是什么原因。最后还是自己想到了，谢谢一楼的三个链接，虽然我看不懂。也谢谢二楼给的方向，虽然我没深入思考过。代码如下

<code>    var input_flag = true;  //设定全局变量为true 关键
    function replace_input(e) {
        if (input_flag) {
            var html = "&lt;input type='text' value='' /&gt;";
            var input = $(e).html(html).find('input');
            input.focus().val('');
            input_flag = false;  
            input.blur(function() {
                var html = $(this).val();
                $(e).html(html);
                input_flag = true;
            });
        }
    };</code>

回复内容：

点击上述图片中红框里的位置可以替换成input文本框如下图

第一个问题来了，如何控制实现一个页面中只能出现一个文本框呢？点击一图中的其他三个位置不完成替换;

第二个问题：我点击页面的任意一个位置，实现获取到文本框中的值并替换掉当前，还是看图吧

做完这些之后，再点击一图其他位置进行上述操作;

附上部分代码，不完整；

<code>
&lt;tr&gt;
      &lt;td colspan="9"&gt;采样日期:&lt;span name="date" onclick="replace_input(this)"&gt;2016.317&lt;/span&gt;            天气: &lt;span onclick="replace_input(this)"&gt;_________&lt;/span&gt;             温度:&lt;span onclick="replace_input(this)"&gt;__________℃&lt;/span&gt;                      湿度&lt;span onclick="replace_input(this)"&gt;______%&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;script type='text/javascript'&gt;
function replace_input(e) {
    $(e).replaceWith("&lt;input type='text' value=''/&gt;");
    
}
&lt;/script&gt;</code>

---------------------------分割线-----------------------------

很失望，盼了一晚还是没有等到自己想要的答案，不知道是我描述不清楚还是什么原因。最后还是自己想到了，谢谢一楼的三个链接，虽然我看不懂。也谢谢二楼给的方向，虽然我没深入思考过。代码如下

<code>    var input_flag = true;  //设定全局变量为true 关键
    function replace_input(e) {
        if (input_flag) {
            var html = "&lt;input type='text' value='' /&gt;";
            var input = $(e).html(html).find('input');
            input.focus().val('');
            input_flag = false;  
            input.blur(function() {
                var html = $(this).val();
                $(e).html(html);
                input_flag = true;
            });
        }
    };</code>

jquery editable
http://shokai.github.io/jQuery.editable/
Jeditable
http://www.appelsiini.net/projects/jeditable
X-editable
https://vitalets.github.io/x-editable/

这个貌似是jQuery UI具有的功能