इनपुट

Question

मैं वेब अनुप्रयोग विकसित कर रहा हूँ करने के लिए अवधि परिवर्तित, मैं इस तरह के एक आवश्यकता है कि जब भी उपयोगकर्ता क्लिक textspan अंदर मैं convert यह input field में और on blur जरूरत है मैं convert it back करने की जरूरत है फिर से पार करने वाली है। तो मैं अपने जेएसपी पेज में से एक में निम्न स्क्रिप्ट का उपयोग कर रहा हूं।

जावा स्क्रिप्ट:

<script type="text/javascript"> 
function covertSpan(id){ 

    $('#'+id).click(function() { 
     var input = $("<input>", { val: $(this).text(), 
            type: "text" }); 
     $(this).replaceWith(input); 
     input.select(); 
    }); 

     $('input').live('blur', function() { 
      var span=$("<span>", {text:$(this).val()}); 
      $(this).replaceWith(span); 

     });   
} 

JSP कोड:

<span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span> 

अब मेरी समस्या है, सब कुछ केवल पहली बार के लिए ठीक काम करता है। मैं जब भी मैं के लिए अवधि के अंदर का पाठ पर क्लिक करें मतलब first time यह इनपुट क्षेत्र में धर्मान्तरित और फिर onblur यह सामान्य पाठ के लिए इनपुट क्षेत्र से वापस coverts। लेकिन अगर ऐसा करने के लिए एक बार फिर कोशिश करें तो यह काम नहीं करेगा। उपरोक्त लिपि के साथ क्या गलत है?

Answer 1

वांडरर्स - आप कुछ समय बचाने के लिए, इस उत्तर के निचले भाग में अंतिम विकल्प सबसे अधिक संभावना हो जाएगा आपका पसंदीदा समाधान

---

मेरा मानना ​​है कि यह आपके लिए क्या देख रहे है: http://jsfiddle.net/2D9FW/

var switchToInput = function() { 
    var $input = $("<input>", { 
     val: $(this).text(), 
     type: "text" 
    }); 
    $input.addClass("loadNum"); 
    $(this).replaceWith($input); 
    $input.on("blur", switchToSpan); 
    $input.select(); 
}; 
var switchToSpan = function() { 
    var $span = $("<span>", { 
     text: $(this).val() 
    }); 
    $span.addClass("loadNum"); 
    $(this).replaceWith($span); 
    $span.on("click", switchToInput); 
}; 
$(".loadNum").on("click", switchToInput); 

मैं तो आप एक से अधिक कर सकता है एक वर्ग के बजाय एक आईडी का इस्तेमाल किया, लेकिन आप इसे वापस स्विच अगर तुम चाहते हो सकता है। आप आईडी का उपयोग करना चाहते हैं: http://jsfiddle.net/2D9FW/1/

---

किसी ने हाल ही बढ़ा यह तो मेरे ध्यान में यह करने के लिए वापस चला गया।यह एक और तरीका यह करने के लिए (डोम कुछ बदल) है: http://jsfiddle.net/2khuobze/

<div class="inputSwitch"> 
First Name: <span>John</span><input /> 
</div> 
<div class="inputSwitch"> 
Last Name: <span>Doe</span><input /> 
</div> 

जे एस

$(".inputSwitch span").on("click", function() { 
    var $this = $(this); 
    $this.hide().siblings("input").val($this.text()).show(); 
}); 
$(".inputSwitch input").on("blur", function() { 
    var $this = $(this); 
    $this.hide().siblings("span").text($this.val()).show(); 
}).hide(); 

---

इसके अलावा, अगर आप ध्यान केंद्रित करने पर सभी का चयन करने और पाने के लिए टैब समर्थन करना चाहते थे http://jsfiddle.net/x33gz6z9/

var $inputSwitches = $(".inputSwitch"), 
    $inputs = $inputSwitches.find("input"), 
    $spans = $inputSwitches.find("span"); 
$spans.on("click", function() { 
    var $this = $(this); 
    $this.hide().siblings("input").show().focus().select(); 
}).each(function() { 
    var $this = $(this); 
    $this.text($this.siblings("input").val()); 
}); 
$inputs.on("blur", function() { 
    var $this = $(this); 
    $this.hide().siblings("span").text($this.val()).show(); 
}).on('keydown', function(e) { 
    if (e.which == 9) { 
    e.preventDefault(); 
    if (e.shiftKey) { 
     $(this).blur().parent().prevAll($inputSwitches).first().find($spans).click(); 
    } else { 
     $(this).blur().parent().nextAll($inputSwitches).first().find($spans).click(); 
    } 
    } 
}).hide(); 

: अगले/पिछले अवधि/इनपुट, तो आप ऐसा कर सकता है ( मैं इस विकल्प का सबसे अच्छा की तरह)

Answer 2

सबसे पहले, आप के रूप में अच्छी live() उपयोग करने के लिए आपके क्लिक हैंडलर बदलने की जरूरत है। तुम्हें पता है, पर ध्यान देना चाहिए हालांकि, कि live() अब काफी देर के लिए मान्य नहीं है। इसके बजाय आपको दोनों मामलों में on() का उपयोग करना चाहिए।

दूसरे, जब तुम अवधि के साथ इनपुट बदलते तो आप तत्व एक आईडी देना नहीं है। इसलिए, तत्व अब आपके क्लिक हैंडलर के लिए चयनकर्ता से मेल नहीं खाता है।

व्यक्तिगत रूप से, मैं एक अलग (और सरल) दृष्टिकोण पूरी तरह से ले जाएगा। मेरे पास दोनों तरफ और मेरे मार्कअप पक्ष में इनपुट में दोनों होंगे। एक छुपाया जाएगा जबकि दूसरा दिखाया जाएगा। यह आपको डीओएम तत्वों को फिर से बनाने और प्रदर्शन में सुधार करने की कोशिश करते समय गलतियों को कम करने का मौका देगा क्योंकि आप लगातार डोम से तत्वों को जोड़/हटा नहीं पाएंगे।

Answer 3

मैं समझता हूँ कि आपको लगता है कि तत्व प्रतिस्थापन, एक अच्छी बात है लेकिन, मैं एक संकेत का उपयोग पाठ प्राप्त करने के लिए होगा। क्यूं कर? यह उपयोगकर्ता के लिए भी बहुत आसान और वास्तव में थोड़ा सुंदर है। यदि आप इसे कैसे करें इस पर उत्सुक हैं, तो मैं आपको दिखाता हूं।

एचटीएमएल:

<span class='editable'>foobar</span> 

js:

$(function() 
{ 
    $('span.editable').click(function() 
    { 
    var span = $(this); 
    var text = span.text(); 

    var new_text = prompt("Change value", text); 

    if (new_text != null) 
     span.text(new_text); 
    }); 
}); 

http://jsfiddle.net/qJxhV/1/

Answer 4

आईडी के साथ smerny's excellent answer का एक और सामान्य संस्करण दो पंक्तियों को थोड़ा बदलकर बनाया जा सकता है: $input.attr("ID", "loadNum");$input.attr("ID", $(this).attr("ID")); बन जाता है - इस तरह, यह केवल वर्तमान आईडी लेता है, और जो भी हो, उसे रखता है।

इसी तरह, $span.attr("ID", "loadNum");$span.attr("ID", $(this).attr("ID"));

यह केवल काम करता है किसी भी div लिए लागू किया जा करने की अनुमति देता हो जाता है। दो समान लाइनों के साथ, आईडी और कक्षा दोनों ठीक काम करते हैं। example देखें।

Answer 5

मैंने कोड में थोड़ा बदलाव किया है, इस इनपुट प्रकार का उपयोग करके रिक्त नहीं हो सकता है, यह इसके वास्तविक मूल्य पर वापस आ जाएगा।

var switchToInput = function() { 
     var $input = $("<input>", { 
      val: $(this).text(), 
      type: "text", 
      rel : jQuery(this).text(), 
     }); 
     $input.addClass("loadNum"); 
     $(this).replaceWith($input); 
     $input.on("blur", switchToSpan); 
     $input.select(); 
    }; 
    var switchToSpan = function() { 
      if(jQuery(this).val()){ 
         var $text = jQuery(this).val(); 
       } else { 
         var $text = jQuery(this).attr('rel'); 
       } 
     var $span = $("<span>", { 
      text: $text, 
     }); 
     $span.addClass("loadNum"); 
     $(this).replaceWith($span); 
     $span.on("click", switchToInput); 
    } 
    $(".loadNum").on("click", switchToInput); 

jsFiddle: - https://jsfiddle.net/svsp3wqL/