2011-12-24 12 views
7

में संग्रहीत करने के लिए JQUERY इनपुट फ़ील्ड मान को मैं एक चर द्वारा टेक्स्टबॉक्स में टाइप किए गए मान को कैप्चर करने में असमर्थ हूं।एक चर

मैं <form> का उपयोग नहीं करना चाहता, क्या ऐसा करने का कोई और तरीका है?

<html> 
    <head> 
    <style> 

    p { color:blue; margin:8px; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
    <input type="text" id="txt_name" /> 

    <script type="text/javascript"> 
    value = $("#txt_name").val(); 
    $("#dom_element").text(value); 
    </script> 

    </body> 
    </html> 

उत्तर

11

आप एक मूल्य है कि उपयोगकर्ता द्वारा टाइप किये तो आप घटना के कुछ प्रकार के जवाब में ऐसा करने की आवश्यकता प्राप्त करना चाहते हैं। जब कोई उपयोगकर्ता टाइप कर रहा है और एक कुंजी जारी करता है तो कीप इवेंट होता है (मान लीजिए या नहीं)। यदि आप कीप को फँसते हैं तो आप अपने वैरिएबल को प्रत्येक कीस्ट्रोक के साथ अपडेट कर सकते हैं लेकिन आपको "चेंज" को फँसाना चाहिए और साथ ही पेस्ट और ड्रैग'ड्रॉप बदलावों को अनुमति देना चाहिए जो कुंजीपटल का उपयोग नहीं करते हैं। "परिवर्तन" घटना तब होती है जब उपयोगकर्ता फ़ील्ड को संशोधित करता है और उसके बाद क्लिक या टैब करता है।

इसके अलावा, इस समय आपके value चर वैश्विक है, लेकिन अगर आप सभी के लिए यह प्रयोग कर रहे हैं एक और क्षेत्र का मान सेट करने के लिए है आप सब पर इसकी आवश्यकता नहीं है: कि भीतर

$("#txt_name").on("keyup change", function() { 
    $("#dom_element").text(this.value); 
}); 

// OR, if you need the variable for some other reason: 
$("#txt_name").on("keyup change", function() { 
    var value = this.value; // omit "var" to make it global 
    $("#dom_element").text(value); 
}); 

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

यदि आप jQuery के पुराने संस्करण का उपयोग कर रहे हैं .bind().on() के बजाय।

+0

मुझे पता है कि एक पुराना सवाल है, लेकिन मैं इसका उपयोग कर रहा था (और यह बहुत अच्छा है, धन्यवाद), लेकिन मैंने देखा कि यह केवल पहले तत्व पर इनपुट है, तो क्या आपके पास कोई विचारधारा है यदि मैं दो या दो से अधिक डीवीवी कर सकता हूं "#dom_element" आईडी के साथ? – euDennis

3

आपका मतलब यह है?

स्क्रिप्ट:

jQuery(function(){ 
    $("#txt_name").keypress(function() { 
     var value = $("#txt_name").val(); 
     $("#myDiv").text(value); 
    }); 
}); 

HTML:

<form> 
    <fieldset> 
    <input id="txt_name" type="text" value="Hello World" /> 
    </fieldset> 
</form> 
<div id="myDiv"></div> 

मुझे आशा है कि आपकी मदद।

+1

कुंजीपटल के बजाय कीप का उपयोग करें। इस तरह जब वे टाइप करते हैं तो आखिरी चरित्र दिखाई देगा। – nick

1
<script> 
    $('#txt_name').keyup(function(){ 
     value = $("#txt_name").val(); 
     $("#dom_element").val(value); 
    }); 
</script> 

इस api.jquery.com से है:

.text() विधि फ़ॉर्म इनपुट या स्क्रिप्ट पर इस्तेमाल नहीं किया जा सकता है। इनपुट या टेक्स्टरी तत्वों के टेक्स्ट मान को सेट या प्राप्त करने के लिए, .val() विधि का उपयोग करें। स्क्रिप्ट तत्व का मान प्राप्त करने के लिए, .html() विधि का उपयोग करें।

jQuery 1.4 के रूप में, .text() विधि टेक्स्ट और सीडीएटीए नोड्स के साथ-साथ तत्व नोड्स का मान देता है।