उपयोगकर्ता के लिए JQuery ईवेंट एक पाठ बॉक्स में दर्ज करें?

Question

क्या Jquery में कोई ऐसी घटना है जो केवल तभी शुरू होती है जब उपयोगकर्ता किसी टेक्स्टबॉक्स में एंटर बटन दबाता है? या कोई भी प्लगइन जो इसे शामिल करने के लिए जोड़ा जा सकता है? यदि नहीं, तो मैं एक त्वरित प्लगइन कैसे लिखूंगा जो ऐसा करेगा?

Answer 1

आप अपने स्वयं के कस्टम ईवेंट को वायर कर सकते हैं

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

Comments

यह ध्यान देने योग्य है कि फॉर्म सबमिशन को रोकने के लिए एंटर डिटेक्शन के एक परिदृश्य में, "कीअप" ईवेंट इष्टतम नहीं है क्योंकि फॉर्म कीडाउन पर सबमिट का पता लगाता है। इस प्रकार "कीडाउन" या "कीपर" उस स्थिति में बेहतर हो सकते हैं।

— टेकनिक्विस्ट

नोट, बाइंड () jQuery 3.0 में पदावनत है।

— बार्ट फ्राइडरिच्स

अलग-अलग ब्राउज़रों के पास e.keyCodeकुछ कुंजियों के लिए अलग-अलग हैं e.which, उपयोग करने के लिए बेहतर है , यह गारंटी देगा कि आप प्रत्येक ब्राउज़र पर एक ही बटन को संभालेंगे

— ओलेग शखोव

Answer 2

   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });

Comments

धन्यवाद - इस समाधान ने मेरे उपयोग के मामले को फिट कर दिया। हालाँकि, यह ध्यान देने योग्य है कि एक बार कोई भी प्रोसेसिंग करने के बाद, आप टेक्स्टबॉक्स को फिर से सक्षम करने के लिए `$ (यह) .removeAttr (" अक्षम ");

— मिस्टरजयेटी

Answer 3

यहाँ आपके लिए एक प्लगइन है: (फिडेल: http://jsfiddle.net/maniator/CjrJ7/ )

$.fn.pressEnter = function(fn) {  

    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

//use it:
$('textarea').pressEnter(function(){alert('here')})

Comments

अच्छा लगा। मेरे द्वारा पोस्ट किए गए URL से बहुत सरल। मुझे आश्चर्य है कि मैंने जो लेख पोस्ट किया है वह सब के बारे में है और यह इतना कोड क्यों लेता है ..

— CaptSaltyJack

बहुत देर हो चुकी है, मैं पहले ही अपना लिख ​​चुका हूं: पी। यह कम लाइनों में भी समान काम करता है .. साथ ही, $प्लगइन के लिए चर का उपयोग करना एक अच्छा विचार नहीं है क्योंकि यह संघर्ष का कारण बन सकता है।

— अपवोट

@ नहीं, क्या आप जानते हैं कि स्वीकृत उत्तर में मैंने जिस प्लगइन को पोस्ट किया है, उसका कोड कैसे बदलना होगा, ताकि कोई ऐसा कर सके $("#myInput").bind('click, onEnter', myCallback);और उसे किसी और चीज़ की आवश्यकता के बिना काम करना होगा?

— अपवोट

@ClickUpvote # 1: इसे उत्तर से हटा दें - फिर हम बात कर सकते हैं।

— नफ़तली उर्फ ​​नील

@ नील अद्भुत समाधान आदमी। मेरे पास बस उस फंक्शन की कॉपी थी! धन्यवाद!

— बिलाल फजलानी

Answer 4

ऐसा करने के लिए एक jquery प्लगइन का उपयोग करता है

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);    
        });               
        return this; 
     };
})(jQuery);

इसका उपयोग करने के लिए, कोड को शामिल करें और इसे इस तरह सेट करें:

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");                
    });
});

इसे यहाँ देखें: http://jsfiddle.net/VrwgP/30/

Comments

अच्छा, मैं कॉलबैक का उपयोग करके कॉल करूंगा func.apply(this), कॉलबैक फ़ंक्शन के अंदर आप thisउस तत्व को एक्सेस करने के लिए सामान्य रूप से उपयोग कर सकते हैं जिस पर ईवेंट को ट्रिगर किया गया था।

— अपवोट

हाँ, func.apply (यह) के बारे में अच्छी बात, यह भी नहीं माना था।

— jzilla

अच्छा और संक्षिप्त है, लेकिन मैं जोड़ूंगा कि प्रचार और चूक को रोकना ज्यादातर मामलों में एक अच्छा विचार होगा, किसी भी रूप को प्रस्तुत करने से रोकना। बस बिट के e.preventDefault(); e.stopPropagation();अंदर जोड़ें if (e.keyCode)।

— इरोंगेज़.कॉम

Answer 5

यह किया जाना चाहिए अच्छी तरह से उल्लेख किया है कि के उपयोग live()jQuery में कर दिया गया है पदावनत संस्करण के बाद से 1.7किया गया है हटा दिया jQuery में 1.9। इसके बजाय, के उपयोग की on()सिफारिश की जाती है।

मैं अत्यधिक बाध्यकारी के लिए निम्नलिखित पद्धति का सुझाव दूंगा, क्योंकि यह निम्नलिखित संभावित चुनौतियों का हल करता है:

1. ईवेंट को बाइंड करके document.bodyऔर $ चयनकर्ता को दूसरे तर्क के रूप में पारित करके on(), तत्वों को फिर से बाइंडिंग या डबल-बाइंडिंग ईवेंट से निपटने की आवश्यकता के बिना डोम से संलग्न, अलग, जोड़ा या हटाया जा सकता है। इसका कारण यह है कि घटना को सीधे के document.bodyबजाय संलग्न किया गया है $selector, जिसका अर्थ है $selectorकि जोड़ा जा सकता है, हटाया जा सकता है और फिर से जोड़ा जा सकता है और कभी भी इस से जुड़ी घटना को लोड नहीं करेगा।
2. off()पहले कॉल करके on(), यह स्क्रिप्ट गलती से दोहरे-बाध्यकारी घटनाओं के बारे में चिंता किए बिना, पेज के मुख्य शरीर के भीतर या AJAX कॉल के शरीर के भीतर रह सकती है।
3. स्क्रिप्ट को लपेटकर $(function() {...}), इस स्क्रिप्ट को पृष्ठ के मुख्य निकाय या फिर AJAX कॉल के मुख्य भाग द्वारा फिर से लोड किया जा सकता है। $(document).ready()AJAX अनुरोधों के लिए निकाल नहीं दिया जाता है, जबकि $(function() {...})करता है।

यहाँ एक उदाहरण है:

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>

Answer 6

यदि आपका इनपुट है search, तो आप on 'search'ईवेंट का उपयोग भी कर सकते हैं । उदाहरण

<input type="search" placeholder="Search" id="searchTextBox">

।

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});

Answer 7

HTML कोड:-

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />      

<input type="button" id="btnclick">

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

function AddKeyPress(e) { 
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

आपके फॉर्म में डिफ़ॉल्ट सबमिट बटन नहीं है

Answer 8

एक और सूक्ष्म भिन्नता। मैं शक्तियों को थोड़ा अलग करने के लिए गया था, इसलिए मेरे पास एंटर कुंजी को पकड़ने में सक्षम करने के लिए एक प्लगइन है, फिर मैं बस सामान्य रूप से घटनाओं के लिए बाध्य करता हूं:

(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);

और फिर उपयोग में:

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

यह भिन्नता आपको ईवेंट प्रतिनिधिमंडल का उपयोग करने की अनुमति देती है (उन तत्वों को बाँधने के लिए जिन्हें आपने अभी तक नहीं बनाया है)।

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });

Answer 9

मुझे keypressप्रवेश बटन के लिए आग लगने की घटना नहीं मिली , और कुछ समय के लिए अपने सिर को खरोंच कर दिया, जब तक कि मैंने jQuery डॉक्स नहीं पढ़ा:

" कीपर ईवेंट को एक तत्व में भेजा जाता है जब ब्राउज़र कीबोर्ड इनपुट को पंजीकृत करता है। यह कीडड इवेंट के समान है, सिवाय इसके कि संशोधक और गैर-प्रिंटिंग कीज़ जैसे कि शिफ्ट, एस्क, और ट्रिगर कीडड इवेंट को हटा दें लेकिन कीपर इवेंट नहीं। " https://api.jquery.com/keypress/ )

मुझे एंटर बटन दबाने के लिए keyupया keydownइवेंट का उपयोग करना था ।