कैसे एक टेक्स्टबॉक्स की सामग्री का पता लगाने के लिए बदल गया है

Question

जब भी कोई टेक्स्टबॉक्स की सामग्री बदली गई है, मैं उसका पता लगाना चाहता हूं। मैं कीप विधि का उपयोग कर सकता हूं, लेकिन यह कीस्ट्रोक्स का भी पता लगाएगा जो कि तीर कुंजी की तरह अक्षर उत्पन्न नहीं करते हैं। मैंने ऐसा करने के दो तरीकों के बारे में सोचा जिसमें कीप इवेंट का उपयोग किया गया था:

1. अगर कुंजी दबाए गए कोड का एक कोड \ backspace \ delete है, तो विस्फोटक रूप से जांचें
2. कुंजी स्ट्रोक से पहले पाठ बॉक्स में पाठ क्या था याद रखने के लिए क्लोजर का उपयोग करें और जांचें कि क्या यह बदल गया है।

दोनों थोड़े बोझिल लगते हैं।

Comments

हां, इसके लिए कीप पकड़ना बुरा है। आप बिना किसी keypresses के सब पर सामान पेस्ट कर सकते हैं।

— खर्चा करने

किसी भी मौका आप अपने अंतिम समाधान पोस्ट कर सकते हैं? मुझे इस समस्या को भी हल करने की आवश्यकता है :)

— मैट डॉटसन

या .keyup()घटना ... यहाँ अधिक जानकारी: stackoverflow.com/questions/3003879/…

— विक्टर एस

$ देखें ("# कुछ-इनपुट")। ChangePolling () ; एक रैपर के लिए जो वर्तमान मूल्य की जांच करता है और .change()यदि यह बदल गया है तो ट्रिगर होता है।

— जोएल पुर्रा

आपको यह भी जांचने की जरूरत है stackoverflow.com/a/23266812/3160597

— azerafati

Answer 1

'परिवर्तन' के बजाय 'इनपुट' घटना का अवलोकन करना शुरू करें।

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

... जो अच्छा और साफ है, लेकिन इसे आगे बढ़ाया जा सकता है:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

Comments

'जीना' पदावनत है। इसलिए 'ऑन' का प्रयोग करें ' stackoverflow.com/a/15111970/1724777

— NavaRajan

'इनपुट' का एकमात्र पतन यह है कि यह IE <9. के साथ संगत नहीं है

— कैटफ़िश

इनपुट html5 घटना है जो सभी ब्राउज़रों में समर्थित नहीं है। developer.mozilla.org/en-US/docs/Web/API/window.oninput

— आम

आप अधिक आधारों का उपयोग करके भी कवर कर सकते हैं: .on ('इनपुट प्रॉपर्टीचेंज पेस्ट', फंक्शन () {

— ग्रेक

IE <9 का एकमात्र पतन यह है कि कोई भी इसका उपयोग नहीं करता है!

— सोहैबी

Answer 2

HTML / मानक जावास्क्रिप्ट में onchange घटना का उपयोग करें।

JQuery में वह परिवर्तन () घटना है। उदाहरण के लिए:

$('element').change(function() { // do something } );

संपादित करें

कुछ टिप्पणियों को पढ़ने के बाद, किस बारे में:

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

Comments

हां, यह वही है जो मैंने अपने प्रश्न में विकल्प # 2 में सुझाया था। मैं एक वैश्विक का उपयोग करने के बाद से बंद करना पसंद करता हूं, यह फ़ंक्शन केवल एक टेक्स्टबॉक्स के लिए काम करेगा। वैसे भी, यह अजीब लगता है कि ऐसा करने का एक सरल तरीका नहीं है।

— ओलामुंडो

यह वास्तव में अजीब है, लेकिन मुझे संदेह है कि इसे करने का एक बेहतर तरीका है। आप setInterval का उपयोग कर सकते हैं और फिर देख सकते हैं कि क्या सामग्री को प्रत्येक 0.1 सेकंड में बदल दिया गया है और फिर कुछ करें। इसमें माउस पेस्ट भी शामिल होंगे। लेकिन यह बहुत सुंदर नहीं है।

— वलद अमजद

यह अभी भी संभव है कि सामग्री को कीस्ट्रोके बिना बदला जा सके, उदाहरण के लिए माउस के साथ चिपकाकर। यदि आप इस बारे में परवाह करते हैं, तो आप सैद्धांतिक रूप से माउस घटनाओं को भी पकड़ सकते हैं, लेकिन यह सेटअप और भी बदसूरत है। दूसरी ओर, यदि आप माउस-चालित परिवर्तनों को अनदेखा करने के इच्छुक हैं, तो यह होगा।

— एडम बेलाएरे

Answer 3

'परिवर्तन' घटना सही ढंग से काम नहीं करती है, लेकिन 'इनपुट' एकदम सही है।

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Comments

यह मेरी स्थिति के लिए पूरी तरह से काम करता है, हालांकि .on1.7 के बाद (इसके बजाय .bind) के उपयोग की सिफारिश की जाती है ।

— निक

ओपी ने क्रॉस ब्राउज़र संगतता की आवश्यकता को निर्दिष्ट नहीं किया। @schwarzkopfb ने एक समाधान प्रदान किया। वोट करने का कोई कारण नहीं है क्योंकि आपके पास ऐसा करने के लिए प्रतिनिधि है।

— डेविड ईस्ट

@

— डेविड

@ jmo21 मुझे लगता है कि हम वेब डेवलपमेंट के लिए मान सकते हैं जब कोई ब्राउज़र विशिष्ट नहीं है तो समाधान क्रॉस-फंक्शनल होना चाहिए। आदर्श सभी ब्राउज़रों का समर्थन कर रहा है।

— क्रिस

@ क्रिस "आदर्श सभी ब्राउज़रों का समर्थन कर रहा है" - केवल अगर आप एक सैडिस्ट हैं। IE 8/9 पर 2% वैश्विक उपयोगकर्ताओं के लिए HTML5 अच्छाई से बचने का कोई अच्छा कारण नहीं है। caniuse.com/#feat=input-event

— Yarin

Answer 4

इस बारे में कैसा है:

<jQuery 1.7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

यह IE8 / IE9, FF, Chrome में काम करता है

Comments

इस उत्तर के साथ मेरे पास जो समस्या है, वह यह है कि अगर आप टेक्स्ट बॉक्स को ब्लर कर देते हैं, तो भी यह मूल्य बदल नहीं जाता है। अपराधी "परिवर्तन" है।

— जस्टिन

क्या आप क्रोम का उपयोग कर रहे हैं? लगता है कि यह क्रोम के साथ एक बग है और jQuery के परिवर्तन की घटना नहीं है bugs.jquery.com/ticket/9335

— कैटफ़िश

काम करता है, लेकिन एक छोटी सी बग है अगर आप console.logउस क्षेत्र का मान दो बार करते हैं जब भी आप एक चरित्र में कुंजी देते हैं।

— सैमुअल एम।

Answer 5

कुंजी स्ट्रोक से पहले चेकबॉक्स में पाठ क्या था याद रखने के लिए क्लोजर का उपयोग करें और जांचें कि क्या यह बदल गया है।

हां। आपको आवश्यक रूप से क्लोजर का उपयोग करने की आवश्यकता नहीं है, लेकिन आपको पुराने मूल्य को याद रखने और नए से तुलना करने की आवश्यकता होगी।

तथापि! यह अभी भी हर बदलाव को नहीं पकड़ेगा, क्योंकि टेक्स्टबॉक्स को संपादित करने के ऐसे तरीके हैं जिनमें कोई कीपर शामिल नहीं है। उदाहरण के लिए पाठ की एक सीमा का चयन करें फिर राइट-क्लिक करें। या उसे घसीटते हुए। या किसी अन्य ऐप से टेक्स्ट को टेक्स्टबॉक्स में छोड़ना। या ब्राउजर के स्पेल-चेक के जरिए किसी शब्द को बदलना। या ...

इसलिए अगर आपको हर बदलाव का पता लगाना है, तो आपको इसके लिए चुनाव करना होगा। आप window.setIntervalइसके पिछले मूल्य के खिलाफ क्षेत्र की जाँच कर सकते हैं हर (कहते हैं) दूसरा। तुम भी तार कर सकता है onkeyupताकि है कि परिवर्तन एक ही कार्य करने के लिए कर रहे हैं keypresses की वजह से तेज परिलक्षित होते हैं।

बोझिल? हाँ। लेकिन यह है कि या यह सामान्य HTML onchange तरीका है और तुरंत अद्यतन करने की कोशिश मत करो।

Comments

इन दिनों HTML5 inputघटना व्यवहार्य है और सभी प्रमुख ब्राउज़रों के वर्तमान संस्करणों में काम करती है।

— टिम डाउन

Answer 6

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

टेक्स्ट बॉक्स में सामग्री परिवर्तन का पता लगाने के लिए आप 'इनपुट' इवेंट का उपयोग कर सकते हैं। घटना को बांधने के लिए 'लाइव' का उपयोग न करें क्योंकि यह Jquery-1.7 में पदावनत है, इसलिए 'ऑन' का उपयोग करें।

Comments

@NavaRajan बस IE9 में फिर से इसका परीक्षण किया। वास्तव में बैकस्पेस पर काम नहीं करता है।

— फ्लोर्स

मैं .live का उपयोग नहीं करना चाहता, लेकिन समस्या यह है कि मैं किसी तरह "भविष्य में वापस" चला गया हूं और एक mvc3 परियोजना पर जिसमें टीम लीड "बॉक्स से बाहर" के साथ रहना चाहता है, इसलिए नहीं केवल EF 4.0, लेकिन 1.5.1 jquery का उपयोग THUS (.on) के साथ किया जा रहा है। 1.5.1 में नहीं था, क्योंकि इसे jquery संस्करण 1.7 api.jquery.com/on

— टॉम स्टिकल

Answer 7

मुझे लगता है कि जब आप टेक्स्टबॉक्स में बदलाव करते हैं (यानी ajax के माध्यम से कुछ डेटा पुनर्प्राप्त करते हैं) तो आप कुछ इंटरैक्टिव करना चाहते हैं। मैं इसी कार्यक्षमता के लिए देख रहा था। मुझे पता है कि एक वैश्विक उपयोग करना सबसे मजबूत या सुरुचिपूर्ण समाधान नहीं है, लेकिन यही वह है जिसके साथ मैं गया था। यहाँ एक उदाहरण है:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

यहां ध्यान देने वाली एक महत्वपूर्ण बात यह है कि मैं सेटटाइमआउट का उपयोग कर रहा हूं और सेट इन्टरवल का उपयोग नहीं कर रहा हूं क्योंकि मैं एक ही समय में कई अनुरोध नहीं भेजना चाहता हूं। यह सुनिश्चित करता है कि अनुरोध पूरा होने पर टाइमर "बंद हो जाता है" और अनुरोध पूरा होने पर "शुरू" होता है। जब मेरा अजाक्स कॉल पूरा हो जाता है, तो मैं checkSearchChanged कॉल करके ऐसा करता हूं। जाहिर है कि आप इसका विस्तार न्यूनतम लंबाई आदि की जांच करने के लिए कर सकते हैं।

मेरे मामले में, मैं ASP.Net MVC का उपयोग कर रहा हूं ताकि आप देख सकें कि एमवीसी अजाक्स के साथ-साथ निम्नलिखित कार्यों में भी इसे कैसे जोड़ा जाए:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

Answer 8

मैं jQuery UI स्वतः पूर्ण विजेट पर एक नज़र डालने की सलाह दूंगा। उन्होंने अधिकांश मामलों को वहां से संभाला क्योंकि उनका कोड आधार वहां के अधिकांश लोगों की तुलना में अधिक परिपक्व है।

नीचे एक डेमो पेज का लिंक दिया गया है ताकि आप यह सत्यापित कर सकें कि यह काम करता है। http://jqueryui.com/demos/autocomplete/#default

आपको स्रोत पढ़ने और यह देखने का सबसे अधिक लाभ मिलेगा कि उन्होंने इसे कैसे हल किया। आप इसे यहां देख सकते हैं: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js ।

मूल रूप से वे यह सब करते हैं, वे बांधते हैं input, keydown, keyup, keypress, focus and blur। फिर उनके पास सभी प्रकार की चाबियों के लिए विशेष हैंडलिंग है page up, page down, up arrow key and down arrow key। टेक्स्टबॉक्स की सामग्री प्राप्त करने से पहले एक टाइमर का उपयोग किया जाता है। जब एक उपयोगकर्ता एक कुंजी टाइप करता है जो कमांड (अप की, डाउन की और इतने पर) के अनुरूप नहीं होता है तो एक टाइमर होता है जो लगभग 300 मिली सेकेंड के बाद सामग्री की खोज करता है। यह कोड में इस तरह दिखता है:

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

टाइमर का उपयोग करने का कारण यह है कि यूआई को अपडेट होने का मौका मिलता है। जब जावास्क्रिप्ट चल रहा है तो UI अपडेट नहीं किया जा सकता है, इसलिए देरी फ़ंक्शन को कॉल करता है। यह अन्य स्थितियों के लिए अच्छी तरह से काम करता है जैसे कि टेक्स्टबॉक्स पर ध्यान केंद्रित करना (उस कोड द्वारा उपयोग किया जाता है)।

तो आप या तो विजेट का उपयोग कर सकते हैं या कोड को अपने स्वयं के विजेट में कॉपी कर सकते हैं यदि आप jQuery UI (या मेरे मामले में कस्टम विजेट विकसित नहीं कर रहे हैं) का उपयोग नहीं कर रहे हैं।

Answer 9

मैं पूछना चाहता हूं कि जब आप टेक्स्टबॉक्स की सामग्री को वास्तविक समय में बदलते हैं तो आप यह क्यों पता लगाने की कोशिश कर रहे हैं ?

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

Comments

मेरी स्थिति (जिसने मुझे इस प्रश्न के लिए प्रेरित किया) यह है कि मुझे एक टेक्स्ट बॉक्स में मात्रा बदलने पर 'अपडेट कार्ट' बटन दिखाने की आवश्यकता है। उपयोगकर्ता को पता नहीं है कि उन्हें फ़ोकस खोने की आवश्यकता है और अन्यथा बटन नहीं देख सकते हैं।

— सिमोन_विवर

क्षमा करें, मुझे यकीन नहीं है कि यह "एक कार्यक्रम में भिन्नता के लिए जाँच क्यों नहीं" के प्रश्न का उत्तर देता है। बस अक्सर पर्याप्त जांच करें (प्रत्येक 1/4 सेकंड का एक) और उपयोगकर्ता को कोई अंतर नहीं पता चलेगा।

— DVK

Answer 10

क्या आप परिवर्तन ईवेंट का उपयोग करने पर विचार करते हैं ?

$("#myTextBox").change(function() { alert("content changed"); });

Comments

AFAIK, यह तभी ट्रिगर होता है जब तत्व का ध्यान खो जाता है। कोई व्यक्ति जो बंदियों से परिचित है, वह शायद इस बारे में जानता है। :)

— सिमोन

हां, यह नहीं होगा - परिवर्तन घटना को केवल तब कहा जाता है जब टेक्स्टबॉक्स फोकस खो देता है। मैं कुंजी दबाए जाने के बाद बदलाव को सही तरीके से संभालना चाहता हूं।

— ओलामुंडो

Answer 11

textchangeक्रॉस-ब्राउज़र inputसंगतता के लिए अनुकूलित jQuery के शिम के माध्यम से घटना का उपयोग करें । http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (हाल ही में सबसे अधिक गिथबोक: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

यह सहित सभी इनपुट टैग को संभालता है <textarea>content</textarea>, जो हमेशा change keyup(आदि!) के साथ काम नहीं करता है केवल jQuery के लगातार टैग on("input propertychange")संभालता है <textarea>, और ऊपर सभी ब्राउज़रों के लिए एक शिम है जो inputघटना को नहीं समझते हैं ।

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

जेएस बिन परीक्षण

यह भी कीप पर पेस्ट, डिलीट, और डुप्लिकेट प्रयास को हैंडल नहीं करता है।

यदि शिम का उपयोग नहीं कर रहे हैं, तो jQuery on("input propertychange")इवेंट्स का उपयोग करें ।

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

Answer 12

यहां पूरा काम करने का उदाहरण है ।

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

Answer 13

इस तरह से कुछ काम करना चाहिए, मुख्य रूप से क्योंकि focusऔर focusoutदो अलग-अलग मूल्यों के साथ समाप्त होगा। मैं dataयहां उपयोग कर रहा हूं क्योंकि यह तत्व में मूल्यों को संग्रहीत करता है लेकिन DOM को स्पर्श नहीं करता है। यह अपने तत्व से जुड़े मूल्य को संग्रहीत करने का एक आसान तरीका भी है। आप आसानी से एक उच्च-स्कोप किए गए चर का उपयोग कर सकते हैं।

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Answer 14

जब भी कोई टेक्स्टबॉक्स की सामग्री उपयोगकर्ता द्वारा बदल दी जाती है और जावास्क्रिप्ट कोड द्वारा संशोधित की जाती है, तो यह कोड पता लगाता है।

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);