2009-04-18 14 views
13

मुझे एक वेब एप्लिकेशन विरासत में मिला है जहां किसी भी इनपुट फ़ील्ड में रिटर्न दबाए जाने की सामान्य क्षमता को बहुत अच्छे कारण के लिए अक्षम कर दिया गया है जिसमें पृष्ठ में कई रूप हैं, और एप्लिकेशन निर्धारित करने में सक्षम नहीं होगा (या, इसलिए मैं मुझे बताया गया है) कौन सा कार्य करने के लिए फार्म। एप्लिकेशन डिज़ाइन किया गया है इसलिए कोई सबमिट बटन नहीं है (इनपुट प्रकार = "सबमिट" में) और, इसके बजाय, डिज़ाइनर ऑनक्लिक हैंडलिंग के लिए गए हैं। यहाँ दो बटन है कि पृष्ठों में से एक पर परिभाषित कर रहे हैं, उदाहरणएकाधिक रूप वाले पृष्ठों पर दबाए गए एंटर कुंजी को कैप्चर कैसे करें?

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit(); />" 

<input type="button" class="button-click-grey" value="Find Link Partners" 
    onclick="raiseEvent('SubmitForm','',this);" style="cursor:pointer;" /> 

के लिए शामिल कर रहे हैं लेकिन मैं वास्तव में अगर वे जैसे इच्छा उन वापसी प्रेस करने की अनुमति के लिए सक्षम होना चाहते हैं अगर उन्होंने अभी LOGIN से जुड़े फ़ील्ड में टाइप किया है, तो उस पर पहचान करें और कार्रवाई पर क्लिक करें = "सबमिट();"

शायद jQuery के साथ एक समाधान है।

उत्तर

2

उंगलियों को पार कर इस काम करेंगे

$(document).ready(function() { 
    var focussed_form; 
    $('input').focus(focus_form); 
    $('input').blur(unfocus_form); 
    $('textarea').focus(focus_form); 
    $('textarea').blur(unfocus_form); 
    $('select').focus(focus_form); 
    $('select').blur(unfocus_form); 

    $(document).keypress(function(e) { 
    if(e.keyCode == 13) 
    { 
     $(focussed_form).trigger('submit'); 
    } 
    }); 

    function focus_form(){ 
    focussed_form = $(this).closest('form'); 
    } 

    function unfocus_form(){ 
    focussed_form = NULL; 
    } 

}); 
+1

मुझे लगता है कि आपको लगता है कि साथ में से कुछ को मजबूत कर सकते हैं:। $ ([ 'इनपुट', 'पाठ क्षेत्र', 'चयन']) फोकस (focus_form) .end() धुंधला (unfocus_form)। // सुनिश्चित नहीं है कि उस अंत की आवश्यकता है या – Matt

+0

काम करेगा यह वही है जो मैं सोच रहा था। –

2

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

कोड यह आप का प्रयोग करेंगे:

<form action="http://foo.com/uri" method="POST"> 
    <input type="submit" name="action1a" value="add" /> 
    <input type="submit" name="action1b" value="delete" /> 
</form> 
<form action="http://foo.com/uri" method="POST"> 
    <input type="submit" name="action2a" value="add" /> 
    <input type="submit" name="action2b" value="delete" /> 
    <input type="submit" name="action2c" value="someOtherAction" /> 
</form> 

तब प्रपत्र प्रसंस्करण स्क्रिप्ट के लिए, तो आप बस सबमिट बटन के नाम, जाँच करेगा उदाहरण के लिए: वैकल्पिक रूप से

if (isset($_POST['action1a'])) ... // PHP syntax 

, आप सबमिट बटन के रूप में छवियों का उपयोग कर सकते हैं, फिर आप सभी सबमिट बटनों के लिए एक ही नाम का उपयोग कर सकते हैं और बस उनके मूल्यों की जांच कर सकते हैं - यदि आप प्रत्येक बटन के अद्वितीय value विशेषता रखते हैं तो आप इसे सामान्य सबमिट बटन के साथ भी कर सकते हैं।


संपादित करें: एक और पद्धति POST गठबंधन और मूल्यों को प्राप्त करने के लिए, यानी है:

<form action="http://foo.com/uri?form=1" method="POST"> 
    <input type="submit" name="action" value="add" /> 
    <input type="submit" name="action" value="delete" /> 
</form> 
<form action="http://foo.com/uri?form=2" method="POST"> 
    <input type="submit" name="action" value="add" /> 
    <input type="submit" name="action" value="delete" /> 
</form> 
32

पेज कई रूपों शामिल है, और आवेदन को निर्धारित (या सक्षम नहीं होगा, तो मैं कर रहा हूँ बताया) जो कार्रवाई करने के लिए फार्म।

जब आप एक इनपुट पर एंटर दबाएं को नियंत्रित ब्राउज़र पहला यह है कि प्रपत्र में बटन प्रस्तुत करना चाहता है और उस पर एक क्लिक simulates। एकाधिक बटनों के मामले में, पहला कीबोर्ड कीबोर्ड पर दबाया जाएगा (यह पत्थर में लिखे गए किसी भी माध्यम से नहीं है और ब्राउज़र इससे विचलित हो सकते हैं)।

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

आप कोड में इस अनुकरण कर सकते हैं, एक फार्म पर:

$('form').bind('keypress', function(e){ 
    if (e.keyCode == 13) { 
    $(this).find('input[type=submit]:first').click(); 
    } 
}); 

या खिड़की (क्या मोटे तौर पर हो रहा है का एक प्रदर्शन के लिए):

$(window).bind('keypress', function(e){ 
    if ($(e.originalTarget).is(':input') && e.keyCode == 13) { 
    $( e.originalTarget) 
     .closest('form') 
     .find('input[type=submit]:first') 
      .click(); 
    } 
}); 

निश्चित रूप से यह मानते हुए कि .preventDefault() नहीं किया गया है घटना पर बुलाया।

नीचे पंक्ति: यदि आपके पास घटना है तो आप इससे दैवीय हो सकते हैं कि यह किस तत्व से आया है और इसलिए यह किस रूप में है।

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();"> 

यहाँ submit() एक वैश्विक समारोह है, लेकिन जब यह कहा जाता है, उसके संदर्भ (this) तत्व होगा और आप submit(e){ this.form.submit(); } ऐसा कर सकते हैं: यहां तक ​​कि इस मामले में।

आवेदन तो वहाँ बटन नहीं प्रस्तुत कर रहे हैं डिजाइन किया गया है (इनपुट प्रकार के रूप में = "सबमिट करें") और, बजाय, डिजाइनरों onclick से निपटने के लिए चले गए हैं।

यह मुझे लगता है जैसे डिजाइनर पूरी तरह से डीओएम/फॉर्म घटनाओं को समझ नहीं पाता है और समस्या के चारों ओर लंबा रास्ता तय कर रहा है। एक अन्य संभावित कारण यह हो सकता है कि कार्यक्रम पुराना है और जब ये चीजें स्थिर नहीं थीं, या ठीक तरह से दस्तावेज की गईं, तो वे वापस डिजाइन किए गए थे।

इस बदलें:

<form action="/login/" method="POST"> 
    [...] 
    <input type="submit" value="LOGIN" name="btnLoginOk"> 
</form> 

फिर सभी रूपों की जरूरत है कि के लिए एक महत्वपूर्ण हैंडलर, कि पता लगाता है और प्रवेश करता है, तो कुछ हालत रूपों के लिए (पूरा किया जाता है को दबा जोड़ें:

<form action="/login/" method="POST"> 
    [...] 
    <input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();"> 
</form> 
इस के साथ

कि आप वास्तव में इसे अक्षम करना चाहते हैं)।

// for all forms that POST that have 2+ submit buttons 
$('form[method=post]:has(:submit:eq(1))').bind('keydown', function(e){ 
    // if target is an enter key, input element, and not a button 
    if (e.keyCode == 13 && e.target.tagName == 'INPUT' && 
     !/^(button|reset|submit)$/i.test(e.target.type)) { 
    return false; // kill event 
    } 
}); 

या बेहतर अभी भी: एक फॉर्म सत्यापन पुस्तकालय (या jQuery प्लगइन) का उपयोग करें जो जानता है कि यह आपके लिए कैसे करें।

+0

यह सब उत्कृष्ट सलाह की तरह लगता है। सुझावों को आजमाने के लिए मैं इस सप्ताह के शुरू में कुछ समय आरक्षित रखूंगा। यदि मेरे पास कोई और टिप्पणी है तो इस जगह को देखें! मैं कम से कम कैसे प्राप्त करूं, इस पर टिप्पणी करूंगा। –

+0

इसे उत्तर के रूप में चिह्नित किया जाना चाहिए। धन्यवाद @ बोर्गन – Red2678

2

आप कुंजी दबाएँ घटना बाध्य कर सकते हैं के लिए jQuery में कुंजी दर्ज करें:

$("form").bind("keypress", function(e) { 
    if (e.keyCode == 13) { 
     your_custom_submit_function(); 
     return false; // ignore default event 
    } 
}); 
+1

मुझे लगता है कि कुंजी कोड 13 होना चाहिए और 34 नहीं। –

संबंधित मुद्दे