जेडडेबल फ़ील्ड के साथ टैब कुंजी

Question

मेरे पास पृष्ठ पर संपादन योग्य टेक्स्ट तत्व बनाने के लिए JQuery और Jeditable का उपयोग कर एक पृष्ठ है।

किसी तत्व को संपादित करते समय, मैं एक तत्व से अगले तत्व में टैब करने में सक्षम होना चाहता हूं।

• उपयोग jeditable या टैब कुंजी घटना पर कब्जा करने के jQuery (कीकोड = 9)

• एक बार है कि घटना का पता चला है, अगले तत्व को फ़ोकस:

  मैं कैसे को लेकर अनिश्चित हूं और jeditable

किसी भी मदद की सराहना की। धन्यवाद!

Answer 1

मैं एक तरह से यह करने के लिए खोज करने में कामयाब। यदि यह अंतिम संपादन बॉक्स है (एक अद्वितीय वर्ग असाइन किया गया है, मुझे चयनकर्ताओं के साथ समस्याएं आ रही हैं), यह पहले तक जाती है।

मैंने भी ("इनपुट") का उपयोग किया क्योंकि मैं एक और चयनकर्ता नहीं ढूंढ पाया जो धुंधला करने के लिए जेडटेबल-निर्मित इनपुट को चुना गया।

इष्टतम नहीं है, लेकिन यह काम करता है।

Answer 2

एक समाधान संपादन योग्य तत्वों के लिए कंटेनर को सुनना, या शायद दस्तावेज़ भी करना होगा। फिर संपादन योग्य तत्वों के लिए दस्तावेज़ या कंटेनर से पूछताछ करने का यह एक आसान काम है, यह निर्धारित करना कि वर्तमान में कौन सा सबसे अधिक संपादित किया गया है, और सूची में अगले तत्व पर जा रहा है।

$('div.editbox').bind('keydown', function(evt) { 
    if(evt.keyCode==9) { 
     $(this).find("input").blur(); 
     var nextBox=''; 
     if ($("div.editbox").index(this) == ($("div.editbox").length-1)) { 
       nextBox=$("div.editbox:first");   //last box, go to first 
      } else { 
       nextBox=$(this).next("div.editbox"); //Next box in line 
      } 
     $(nextBox).dblclick(); //Go to assigned next box 
     return false;   //Suppress normal tab 
    }; 
}); 

एक टैब पर, एक डबल क्लिक करें (jeditable dblclick घटना का उपयोग करने के लिए यहाँ सेट किया गया है) बगल में स्थित बॉक्स को भेजा जाता है:

Answer 3

$('div.edit').bind('keydown', function(evt) { 
if(evt.keyCode==9) { 
    var nextBox=''; 
    var currentBoxIndex=$("div.edit").index(this); 
    if (currentBoxIndex == ($("div.edit").length-1)) { 
      nextBox=$("div.edit:first");   
     } else { 
      nextBox=$("div.edit").eq(currentBoxIndex+1);  
     } 
    $(this).find("input").blur(); 
    $(nextBox).click(); 
    return false;   
}; 
}); 

इस जाँच करते हैं तो यह आपको

Answer 4

बस एक मामूली इसके अलावा में मदद मिलेगी - अपने jeditable क्षेत्रों अन्य तत्वों के भीतर नेस्ट कर रहे हैं, 'nextBox = $ (this) .next ("div.editbox"); ' काम करेंगे नहीं, तो भीतर से 'लक्षित' तत्वों और काम की एक सरणी बनाने ...

$('.editable_textarea').bind('keydown', function(evt) { 
    if(evt.keyCode==9) { 
     $(this).find("input").blur(); 
     // create an array of targeted jeditable fields 
     var boxArray = $("#parent_element").find('.editable_textarea') 
     var nextBox = ''; 
     if ($('.editable_textarea').index(this) == ($('.editable_textarea').length-1)) { 
      nextBox = $(".editable_textarea:first");   //last box, go to first 
     } else { 
      // use the index of the active field to find the next one in the boxArray 
      nextBox = boxArray[$('.editable_textarea').index(this)+1]; //Next box in line 
     } 
     $(nextBox).click(); //Go to assigned next box 
     return false;   //Suppress normal tab 
    }; 
});