वेब पेजों के लिए एक टैब कुंजी प्रेस में एक एंटर कुंजी प्रेस को कैसे परिवर्तित करें

Question

एंटर कुंजी प्रेस टैब कुंजी प्रेस की तरह काम करना चाहिए। टेक्स्टएरिया और सबमिट बटन के लिए एंटर कुंजी प्रेस सामान्य रूप से काम करना चाहिए। फोकस को अगले से छोड़ना चाहिए तत्व जब अगला फ़ील्ड अक्षम/पढ़ा जाता है।

धन्यवाद,

Answer 1

सबसे पहले, यह शायद उपयोगिता के अनुसार एक अच्छा विचार नहीं है।

$(":input").on("keydown", function(event) { 
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) { 
     event.stopPropagation(); 
     event.preventDefault(); 

     $(this) 
      .nextAll(":input:not(:disabled, [readonly='readonly'])") 
      .first() 
      .focus(); 
    } 
}); 

उदाहरण:: हालांकि, यहां कुछ ऐसा है जो काम करना चाहिए हैhttp://jsfiddle.net/NDcrk/

टुकड़ा पता चलता है कि अगले इनपुट, बदलने के लिए अपने मार्कअप के आधार पर हो सकता है।

Answer 2

मुझे एक ही समस्या है, जहां मैं अगले क्षेत्र में टैब पर numpad पर + दबा देना चाहता था। अब मैंने एक पुस्तकालय जारी किया है जो मुझे लगता है कि आपकी मदद करेगा।

PlusAsTab: एक jQuery कुंजीपटल एक टैब कुंजी समकक्ष के रूप में numpad प्लस कुंजी का उपयोग करने के लिए एक jQuery प्लगइन।

आप चाहते चूंकि/↵ बजाय, आप विकल्प सेट कर सकते दर्ज करें। पता लगाएं कि आप किस कुंजी का उपयोग jQuery event.which demo के साथ करना चाहते हैं।

JoelPurra.PlusAsTab.setOptions({ 
    // Use enter instead of plus 
    // Number 13 found through demo at 
    // https://api.jquery.com/event.which/ 
    key: 13 
}); 

नमूना HTML

<!-- Enable enter as tab as the default for all fields in this form --> 
<form data-plus-as-tab="true"> 
    <input type="text" value="Enter skips to the next field" autofocus="autofocus" /> 
    <!-- Exclude this textarea --> 
    <textarea data-plus-as-tab="false">Enter works as usual</textarea> 
    <input type="text" value="Enter skips to the next field" /> 
    <select><option>Enter skips here too</option></select> 
    <!-- Exclude this submit button --> 
    <button type="submit" data-plus-as-tab="false">Enter works as usual</button> 
</form> 

आप देख सकते हैं, यह data-plus-as-tab="true" के साथ एक कंटेनर में सभी तत्वों को सक्षम करने के लिए आसान है, और यह data-plus-as-tab="false" साथ विशिष्ट तत्वों को बाहर करने में आसान है। आप $('textarea, :button').plusAsTab(false); के साथ जावास्क्रिप्ट से कुछ प्रकार (मौजूदा तत्वों पर) को भी बाहर निकाल सकते हैं।

आप PlusAsTab enter as tab demo में इसे अपने आप आज़मा सकते हैं।

Answer 3

यह समाधान मेरे लिए काम करता है। आईई और फ़ायरफ़ॉक्स पर इसका परीक्षण किया।

<script type="text/javascript"> 
    function tabE(obj, e) { 
     var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
     if (e.keyCode == 13) { 
      var ele = document.forms[0].elements; 
      for (var i = 0; i < ele.length; i++) { 
       var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
       if (obj == ele[i]) { 
        ele[q].focus(); 
        break 
       } 
      } 
      return false; 
     } 
    } 
</script> 

<form METHOD="POST"> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <INPUT TYPE="submit" Value="Ok"> 
</form> 

मुझे यह here मिला।

Answer 4

इस मामले में फॉर्म तत्व कैसे जांचें? मैं एक कई इनपुट (पाठ बॉक्स, रेडियो बटन,) है, लेकिन कुछ तत्वों प्रदर्शित किए जाते हैं, कुछ तत्वों

<script type="text/javascript"> 
function tabE(obj, e) { 
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
if (e.keyCode == 13) { 
var ele = document.forms[0].elements; 
for (var i = 0; i < ele.length; i++) { 
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
if (obj == ele[i]) { 
ele[q].focus(); 
break 
} 
} 
return false; 
} 
} 
</script> 

<form METHOD="POST"> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<INPUT TYPE="submit" Value="Ok"> 
</form> 

प्रदर्शित नहीं