2010-01-16 13 views
5

मेरे पास INPUT तत्व है और मैं पिछले मान को रीसेट करना चाहता हूं (आवश्यक मूल मान नहीं)।फॉर्म के बिना INPUT रीसेट करें

  1. किसी अन्य वैरिएबल के मूल्य को बचाने और इसे फिर से बाहर खींच
  2. ESC कुंजी: 2 तरीके हैं। लेकिन मैं नहीं चाहता कि उपयोगकर्ता ईएससी दबाएं लेकिन एक बटन पर क्लिक करें।

तो # 2 के लिए, मैं jquery का उपयोग कर एक ईएससी कीस्ट्रोक कैसे बना सकता हूं?

+0

- वहाँ एक डिफ़ॉल्ट जावास्क्रिप्ट संपत्ति कहा जाता है 'defaultValue' है:

// pseudocode input.defaultValue; radio.defaultChecked; checkbox.defaultChecked; 

ESC कुंजी दबाने से एक इनपुट के लिए डिफ़ॉल्ट मान सेट करने के लिए। आप अलग-अलग तत्वों पर 'input.value = input.defaultValue' का उपयोग कर सकते हैं। बाहरी चर में कोई बिंदु सहेजने वाला डेटा नहीं है जब यह पहले से मौजूद है। डेटा के बजाय एटीआर का उपयोग करने के लिए – Shadow

उत्तर

5

यहाँ एक SSCCE है:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2079185</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(':input.remember').each(function() { 
        $(this).attr('data-remember', $(this).val()); 
       }); 
       $('button.reset').click(function() { 
        $(':input.remember').each(function() { 
         $(this).val($(this).attr('data-remember')); 
        }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <input type="text" class="remember" value="foo"> 
     <button class="reset">Reset</button> 
    </body> 
</html> 

यह मूल रूप से ऑनलोड के दौरान remember की कक्षा के साथ प्रत्येक इनपुट तत्व का मूल मूल्य संग्रहीत करता है और जब भी क्लिक किया जाता है तो उसे पुनर्स्थापित करने के लिए reset की कक्षा के साथ बटन निर्देशित करता है।

+0

+1। क्लीनर और अधिक कुशल! – Ariel

+1

यह 'के बाहर' 'होने के लिए पूरी तरह से मान्य है। यह उन फॉर्मों के लिए सामान्य है जिन्हें सबमिट करने का इरादा नहीं है। एकमात्र कमी यह है कि रेडियो बटन ठीक तरह से समूहित नहीं होते हैं। – bobince

+0

आप सही हैं! फिक्स्ड। – BalusC

2

एसीसी तब भी काम करता है जब आप अभी भी मैदान के अंदर हैं।

जैसे ही आप बटन क्लिक करें, क्षेत्र फोकस खो देंगे और मूल्य क्षेत्र में संग्रहीत किया जाएगा, ताकि आप डिफ़ॉल्ट ब्राउज़र प्रक्रिया के माध्यम से उसे वापस नहीं ला सकते हैं ..

आप केवल # 1 विकल्प का उपयोग कर सकते हैं आप का उल्लेख ..

क्षेत्र के कलंक पर (घटना है जब आप फोकस खो) आप मान संग्रहीत करना चाहिए, और जब आप बटन पर क्लिक करें संग्रहीत पर वापस जा ..

2

कीस्ट्रोक जैसी घटनाएं उत्पन्न करने के बारे में भूल जाओ। यद्यपि आप (विभिन्न गैर पोर्टेबल तरीकों से) ईवेंट बना सकते हैं और उन्हें ईवेंट हैंडलिंग सिस्टम में रूट कर सकते हैं, इससे केवल उचित ईवेंट हैंडलर फ़ंक्शंस को कॉल किया जा सकता है; यह नहीं ब्राउज़र को उपयोगकर्ता द्वारा जेनरेट की गई क्रिया के लिए डिफ़ॉल्ट क्रियाएं करता है जैसे कीस्ट्रोक या माउस क्लिक।

किसी भी मामले में, एस्केप पर रीसेट करने के साथ आप जिस व्यवहार के बारे में बात कर रहे हैं वह एक आईई क्विर्क है: किसी अन्य ब्राउज़र में एस्केप का कोई प्रभाव नहीं पड़ता है, और यहां तक ​​कि आईई में भी अविश्वसनीय है। विशेष रूप से, एक सामान्य रूप में, एक एस्केप प्रेस अंतिम फोकस के बाद से परिवर्तन खो देता है, और पंक्ति में दो एस्केप प्रेस पूरे फॉर्म को प्रारंभिक मानों पर रीसेट करते हैं। हालांकि, अगर फॉर्म में <input type="reset"> है, तो एक एकल एस्केप प्रेस फॉर्म रीसेट करता है और रीसेट बटन पर केंद्रित होता है। यह आपके द्वारा टाइप की गई सभी चीज़ों को गलती से खोना और भी आसान बनाता है और आपके फॉर्म में रीसेट बटन शामिल न करने का एक और अच्छा कारण है।

तो, यदि आप प्रारंभिक मानों पर रीसेट करना चाहते हैं, तो आप form.reset() पर कॉल कर सकते हैं। यदि आप केवल एक फ़ील्ड रीसेट करना चाहते हैं, तो आप input.value= input.defaultValue (या input.checked= input.defaultChecked चेकबॉक्स/रेडियो के लिए सेट कर सकते हैं, और इसी तरह defaultSelected विकल्पों पर)।

अगर, हालांकि, आप मूल्य उस समय क्षेत्र पिछले फ़ोकस था में उपस्थित थे, के रूप में आईई बर्ताव करता है जब वहाँ कोई रीसेट बटन है, तो आप कुछ चर-याद, जैसे .:

करना होगा चाहते हैं
var undonevalue= $('#undoable').val(); 
$('#undoable').focus(function() { 
    undonevalue= $('#undoable').val(); 
}); 
$('#undoer').click(function() { 
    $('#undoable').val(undonevalue); 
}); 
+0

वास्तव में यह सही/सर्वोत्तम उत्तर है। स्वच्छ और विस्तृत स्पष्टीकरण के लिए धन्यवाद। आपने मेरा दिन बना दिया :) :) –

1

प्रत्येक तत्व (इनपुट, चेकबॉक्स, रेडियो) में एक विशेषता है जिसमें डिफ़ॉल्ट मान होता है, तत्व को inititalized किया गया था। यह परिदृश्य पिछले मानों के लिए नहीं काम करता है।भविष्य दर्शकों के लिए

$(document).ready(function(){ 
    // reset by pressing ESC with focus on input 
    $('input').keypress(function(e) { 
     if (e.keyCode == 27) { 
      this.value = this.defaultValue; 
     } 
    }); 
}); 
संबंधित मुद्दे