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

Question

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

कुंजीपटल में टैब कुंजी दबाए बिना, मैं जावास्क्रिप्ट के माध्यम से एक ही कार्यक्षमता लाने के लिए चाहता हूं। क्या यह संभव है ?

Answer 1

function nextField(current){ 
    for (i = 0; i < current.form.elements.length; i++){ 
     if (current.form.elements[i].tabIndex == current.tabIndex+1){ 
      current.form.elements[i].focus(); 
      if (current.form.elements[i].type == "text"){ 
       current.form.elements[i].select(); 
      } 
     } 
    } 
} 

यह, वर्तमान क्षेत्र के साथ आपूर्ति करते समय, अगले टैब इंडेक्स के साथ फ़ील्ड पर फोकस करेगा। प्रयोग के रूप में

<input type="text" onEvent="nextField(this);" /> 

Answer 2

तुम सिर्फ अगर तुम jQuery इस कोड का उपयोग कर रहे टैब अनुकरण करेगा, उदाहरण के लिए (कि इनपुट तत्व पर ध्यान केंद्रित() विधि लागू द्वारा) अगले इनपुट फ़ील्ड पर ध्यान देने की आवश्यकता इस प्रकार होगा कुंजी जब दर्ज दबाया जाता है:

var inputs = $(':input').keypress(function(e){ 
    if (e.which == 13) { 
     e.preventDefault(); 
     var nextInput = inputs.get(inputs.index(this) + 1); 
     if (nextInput) { 
      nextInput.focus(); 
     } 
    } 
}); 

Answer 3

टैब कार्यक्षमता का अनुकरण करने के थोड़ी देर पहले की जरूरत है, और अब मैं released it as a libraryjquery का उपयोग करता है है।

EmulateTab: एक jQuery प्लगइन किसी पृष्ठ पर तत्वों के बीच टैबबिंग अनुकरण करने के लिए।

आप see how it works in the demo कर सकते हैं।

if (myTextHasBeenFilledWithText) { 
    // Tab to the next input after #my-text-input 
    $("#my-text-input").emulateTab(); 
} 

Answer 4

पहले प्रश्न में, आपको हर इनपुट पर एक ईवेंट श्रोता की आवश्यकता नहीं है जो अपमानजनक होगा।

इसके बजाय, सुनने के लिए कुंजी दर्ज करें और वर्तमान में केंद्रित तत्व का उपयोग document.activeElement

window.onkeypress = function(e) { 
    if (e.which == 13) { 
     e.preventDefault(); 
     var nextInput = inputs.get(inputs.index(document.activeElement) + 1); 
     if (nextInput) { 
      nextInput.focus(); 
     } 
    } 
}; 

एक घटना श्रोता कई की तुलना में बेहतर है, विशेष रूप से कम बिजली/मोबाइल ब्राउज़र पर खोजने के लिए।

Answer 5

मैं मेरे लिए काम करने के लिए ltiong_sh के जवाब एडाप्टर है:

function nextField(current){ 
    var elements = document.getElementById("my-form").elements; 
    var exit = false; 
    for(i = 0; i < elements.length; i++){ 
     if (exit) { 
      elements[i].focus(); 
      if (elements[i].type == 'text'){ 
       elements[i].select(); 
      } 
      break; 
     } 
     if (elements[i].isEqualNode(current)) { 
      exit = true; 
     }  
    } 
} 

Answer 6

यह एक फार्म के माध्यम से एक टैब simulates और कब प्रविष्ट कुंजी दबाने अगले इनपुट करने के लिए ध्यान केंद्रित करने देता है।

window.onkeypress = function(e) { 
    if (e.which == 13) { 
     e.preventDefault(); 
     var inputs = document.getElementsByClassName('input'); 
     for (var i = 0; i < inputs.length; i++) { 
     if (document.activeElement.id == inputs[i].id && i+1 < inputs.length) { 
      inputs[i+1].focus(); 
      break; 
     } 
    } 

Answer 7

मुझे ऐसा कोई जवाब नहीं मिला जो मैं चाहता था। मुझे एक समस्या थी जहां कुछ लिंक तत्व थे जिन्हें मैं नहीं चाहता था कि उपयोगकर्ता टैबबिंग करें। यह क्या मैं के साथ आया है:

(। ध्यान दें कि अपने खुद के कोड में मैं var all लाइन पर a:not(.dropdown-item) बजाय a इस्तेमाल किया)

function(event){ 
     //not that this doesn't work with tab-indexes 

     //allows fluid tabbing through 

     //isolate the node that we're after 
     var current = event.target; 

     //find all tab-able elements 
     var all = document.querySelectorAll('input, button, a, area, object, select, textarea'); 

     var currentIndex; 

     for(var i = 0; i < all.length; i++){ 
      //loop through all tab-able elements 
      if(current.isEqualNode(all[i])){ 
       //if a match is found then assign index 
       currentIndex = i; 
      } 
     } 

     //focus the following element 
     all[currentIndex + 1].focus(); 
}