javascript - 點擊頁面任意一個地方擷取到文字框內容並替換

點擊上述圖片中紅框裡的位置可以替換成input文字框如

第一個問題來了，如何控制實現一個頁面中只能出現一個文字框呢？點擊一圖中的其他三個位置不完成替換;

第二個問題：我點擊頁面的任意一個位置，實現擷取到文字框中的值並替換掉當前，還是看圖吧

做完這些之後，再點擊一圖其他位置進行上述操作;

附上部分代碼，不完整；

      採樣日期:2016.317            天氣: _________             溫度:__________℃                      濕度______%

---------------------------分割線-----------------------------

很失望，盼了一晚還是沒有等到自己想要的答案，不知道是我描述不清楚還是什麼原因。最後還是自己想到了，謝謝一樓的三個連結，雖然我看不懂。也謝謝二樓給的方向，雖然我沒深入思考過。代碼如下

    var input_flag = true;  //設定全域變數為true 關鍵    function replace_input(e) {        if (input_flag) {            var html = "";            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;            });        }    };

回複內容：

點擊上述圖片中紅框裡的位置可以替換成input文字框如

第一個問題來了，如何控制實現一個頁面中只能出現一個文字框呢？點擊一圖中的其他三個位置不完成替換;

第二個問題：我點擊頁面的任意一個位置，實現擷取到文字框中的值並替換掉當前，還是看圖吧

做完這些之後，再點擊一圖其他位置進行上述操作;

附上部分代碼，不完整；

      採樣日期:2016.317            天氣: _________             溫度:__________℃                      濕度______%

---------------------------分割線-----------------------------

很失望，盼了一晚還是沒有等到自己想要的答案，不知道是我描述不清楚還是什麼原因。最後還是自己想到了，謝謝一樓的三個連結，雖然我看不懂。也謝謝二樓給的方向，雖然我沒深入思考過。代碼如下

    var input_flag = true;  //設定全域變數為true 關鍵    function replace_input(e) {        if (input_flag) {            var html = "";            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;            });        }    };

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具有的功能

