क्लिक किए जाने पर टेक्स्ट फ़ील्ड को इनपुट फ़ील्ड प्रकार टेक्स्ट में बदलें और

Question

पर क्लिक करते समय टेक्स्ट पर वापस बदलें, मैं फ्लाई पर बदल रहे फ़ील्ड के साथ एक फॉर्म बनाने की कोशिश कर रहा हूं।

सरल पाठ के साथ प्रारंभ करें और जब कोई इस पाठ पर क्लिक करता है तो यह संपादन योग्य टेक्स्ट इनपुट फ़ील्ड में स्थानांतरित हो जाता है। जब कोई दूर क्लिक करता है तो यह वापस संपादन योग्य पाठ में बदल जाता है।

मैंने इसे एक दिया लेकिन यह ठीक से काम नहीं कर रहा है। पहले कुछ क्लिक पर ठीक काम करता है लेकिन फिर यह इनपुट खो रहा है और बटन को मिला रहा है।

यहाँ एचटीएमएल

<p id="firstElement" onclick="turnTextIntoInputField('firstElement');">First Element</p> 
<p id="secondElement" onclick="turnTextIntoInputField('secondElement');">Second Element</p> 

यहाँ है और जावास्क्रिप्ट (jQuery का उपयोग) है।

मैं जावास्क्रिप्ट में काफी नया हूँ तो यह अच्छी गुणवत्ता कोड नहीं हो सकता है ...

function turnTextIntoInputField(inputId) 
{ 
    console.log(inputId); 
    inputIdWithHash = "#"+inputId; 
    elementValue = $(inputIdWithHash).text(); 
    $(inputIdWithHash).replaceWith('<input name="test" id="'+inputId+'" type="text" value="'+elementValue+'">'); 

    $(document).click(function(event) { 
     if(!$(event.target).closest(inputIdWithHash).length) { 
      $(inputIdWithHash).replaceWith('<p id="'+inputId+'" onclick="turnTextIntoInputField(\''+inputId+'\')">'+elementValue+'</p>'); 
     }  

    }); 
} 

यहाँ बेला पर लाइव उदाहरण है https://jsfiddle.net/7jz510hg/

मैं के रूप में यह मेरे सिर में दर्द दे रही है किसी भी मदद की सराहना करेंगे ...

Answer 1

सबसे पहले, आपको HTML में onclick का उपयोग करने की आवश्यकता नहीं है।

/** 
 
    We're defining the event on the `body` element, 
 
    because we know the `body` is not going away. 
 
    Second argument makes sure the callback only fires when 
 
    the `click` event happens only on elements marked as `data-editable` 
 
*/ 
 
$('body').on('click', '[data-editable]', function(){ 
 
    
 
    var $el = $(this); 
 
       
 
    var $input = $('<input/>').val($el.text()); 
 
    $el.replaceWith($input); 
 
    
 
    var save = function(){ 
 
    var $p = $('<p data-editable />').text($input.val()); 
 
    $input.replaceWith($p); 
 
    }; 
 
    
 
    /** 
 
    We're defining the callback with `one`, because we know that 
 
    the element will be gone just after that, and we don't want 
 
    any callbacks leftovers take memory. 
 
    Next time `p` turns into `input` this single callback 
 
    will be applied again. 
 
    */ 
 
    $input.one('blur', save).focus(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p data-editable>First Element</p> 
 
    
 
<p data-editable>Second Element</p> 
 
    
 
<p>Not editable</p>

Answer 2

फिडल: https://jsfiddle.net/7jz510hg/1/

मुद्दे के साथ inputIdWithHash और elementValue चर को परिभाषित नहीं द्वारा किया गया था var वे वैश्विक चर बन गए।

var inputIdWithHash 
var elementValue 

तब से उनके पास वैश्विक दायरा था क्योंकि दस्तावेज़ों के पुराने मूल्य दस्तावेज़ हैंडलर पर उपलब्ध थे। आप चाहते हैं कि उन्हें स्थानीय रूप से उस turnTextIntoInputField फ़ंक्शन के भीतर स्कॉप्ड किया जाए।

और एक अद्यतन मूल्यों को बनाए रखने: https://jsfiddle.net/7jz510hg/2/

साइड ध्यान दें, आप jQuery 1.6 का उपयोग कर रहे तो मैं बंद के बजाय अनबाइंड समारोह का उपयोग करने के लिए किया था।

अपडेट किया गया बेला: https://jsfiddle.net/7jz510hg/3/

यह नवीनतम jQuery का उपयोग करता है, घटना नेमस्पेसिंग तो हम दस्तावेज़ इसलिए हमें क्षेत्रों के बीच क्लिक करने के लिए और कुछ भी खोना नहीं की अनुमति के लिए एक से अधिक क्लिक करें घटना संलग्न कर सकते हैं। पिछले फ़ील्ड गड़बड़ कर देगा यदि आपने सीधे क्लिक फ़ील्ड के बजाय फ़ील्ड पर क्लिक किया है, तो दस्तावेज़ क्लिक करें, फ़ील्ड पर क्लिक करें।