परिवर्तित इनपुट टेक्स्ट बॉक्स का पता लगाएं

Question

मैंने कई अन्य प्रश्नों को देखा है और नीचे दिए गए कोड सहित बहुत सरल उत्तर पाए हैं। मैं बस यह पता लगाना चाहता हूं कि जब कोई टेक्स्ट बॉक्स की सामग्री को बदलता है लेकिन किसी कारण से यह काम नहीं कर रहा है ... मुझे कोई कंसोल त्रुटियाँ नहीं मिलती हैं। जब मैं change()फ़ंक्शन में ब्राउज़र में एक ब्रेकपॉइंट सेट करता हूं तो यह कभी हिट नहीं होता है।

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

Comments

बस कोशिश करने के लिए कुछ चीजें: इनपुट को एक प्रकार = "टेक्स्ट" दें और इसे एक सिंगलटन तत्व बनाएं। <input id = "inputDatabaseName" प्रकार = "टेक्स्ट" />

— szeliga

कुछ अनावश्यक कोड को साफ किया, केवल 7 साल बहुत देर हो गई।

— डेविल्स एडवोकेट

Answer 1

आप उपयोग कर सकते हैं input जावास्क्रिप्ट का इस तरह jQuery में :

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

शुद्ध जावास्क्रिप्ट में:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

या इस तरह:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

Comments

इस घटना के लिए दस्तावेज़ीकरण नहीं मिल रहा है, लेकिन यह ठीक उसी तरह से काम करता है जिस तरह से मैं इसकी उम्मीद करता हूं। कोई भी विचार जहां मैं डॉक्टर पृष्ठ पा सकता हूं?

— जॉर्ज पेड्रेट

आप इसे एचटीएमएल 5 घटनाओं की सूची में पा सकते हैं: w3schools.com/tags/ref_eventattributes.asp या यहाँ help.dottoro.com/ljhxklln.php

— Ouadie

यह समाधान वास्तव में कीप का उपयोग करने से कहीं बेहतर है। उदाहरण के लिए IE एक एक्स क्लिक करके उपयोगकर्ता को स्पष्ट इनपुट फ़ील्ड देता है जो की-ट्रिगर नहीं करता है।

— जॉर्ज

अब तक निकटतम समाधान, लेकिन तब भी काम नहीं करता है जब ब्राउज़र टेक्स्टबॉक्स पर ऑटोफ़िल करता है।

— सौमिल 19

यह पहले उत्तर की तुलना में कहीं बेहतर है। Ctrl, Shift कुंजियाँ सभी को कीप के रूप में गिना जाता है। और सबसे खराब हिस्सा यह है, यदि आप तेजी से टाइप करते हैं, तो कई इनपुट केवल एक कीप इवेंट के रूप में दर्ज होंगे।

— अष्टकप

Answer 2

बदलाव के बजाय कीअप को आज़माएं।

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

यहाँ .keyup () के लिए आधिकारिक jQuery प्रलेखन है ।

Comments

sigh I swear मैंने कोशिश की कि (इस सवाल को देखने के बाद: stackoverflow.com/questions/1443292/… ) ... लेकिन जाहिरा तौर पर नहीं क्योंकि यह अब काम करता है!

— डेविल्स एडवोकेट

परिवर्तन केवल तब होता है जब तत्व फोकस खो देता है और कीबोर्ड पर कुंजी जारी होने पर कीप को निकाल दिया जाता है।

— डेकन कुक

क्या होगा यदि उपयोगकर्ता ctrl + v का उपयोग करके या #inputDatabase नाम पर माउस के साथ चयनित पाठ को खींचकर कोड पेस्ट करता है? आप उसका पता कैसे लगाते हैं?

— राडू सिमियोनेस्कु

इसके साथ मुख्य समस्या यह है कि यदि सामग्री वास्तव में बदलती है तो भी यह ध्यान में नहीं आती है। केवल यही एक बटन दबाया गया था

— महानगर

@ मेट्रोपोलिस, आपने मेरा उत्तर देखा है ?? stackoverflow.com/a/23266812/3160597

— azerafati

Answer 3

प्रत्येक उत्तर में कुछ बिंदु गायब हैं, इसलिए यहां मेरा समाधान है:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

Input Eventपर आग कीबोर्ड इनपुट, माउस खींचें , स्वत: भरण और प्रतिलिपि बनाने-चिपकाने Chrome और Firefox पर परीक्षण किया। पिछले मूल्य के लिए जाँच करने से यह वास्तविक परिवर्तनों का पता लगाता है, जिसका अर्थ है कि एक ही चीज़ को चिपकाते समय या एक ही चरित्र को टाइप करते हुए फायरिंग न करना या आदि।

काम करने का उदाहरण: http://jsfiddle.net/g6pcp/473/

---

अपडेट करें:

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

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

यदि उपयोगकर्ता टाइप करना शुरू कर देता है (उदाहरण के लिए "foobar") तो यह कोड आपके change actionप्रत्येक अक्षर उपयोगकर्ता प्रकारों के लिए चलने से रोकता है और केवल तब चलता है जब उपयोगकर्ता लिखना बंद कर देता है, यह विशेष रूप से तब होता है जब आप सर्वर को इनपुट भेजते हैं (जैसे खोज इनपुट), जिस तरह से सर्वर करता है केवल एक के लिए खोज foobarऔर के लिए नहीं छह खोजें fऔर फिर foऔर फिर fooऔर foobऔर इतने पर।

Comments

मैंने पहली बार 6 के बारे में काम करने की कोशिश की। बहुत बढ़िया। धन्यवाद।

— एनकोड

IE9 पर लगभग काम करता है: यदि आप एक चरित्र को हटाते हैं, तो यह घटना को आग नहीं देता है। बहुत अच्छा समाधान हालांकि

— सोमा

@ सोमा, जैसा कि अन्य कहते हैं, "आईई को तोड़ना एक दोष नहीं है, यह एक विशेषता है";) हालांकि आईई अब भी जारी नहीं है, लेकिन अगर आपके पास इसके लिए कोई फिक्स है तो हमें बताएं

— azerafati

मुझे पता है, लेकिन मुझे इसे काम के लिए करना था :( तथ्य की बात के रूप में, मैं करता हूं: उपयोग $("#input").focusout(function () {})। जब आप अपने इनपुट के बाहर क्लिक करते हैं, तो घटना को निकाल दिया जाता है। क्रोम और फ़ायरफ़ॉक्स के वर्तमान संस्करण पर काम करता है, और IE9

— सोमा

@ सोमा, अगर यह IE के लिए काम करने का एकमात्र तरीका है, तो आप इसे केवल इस लाइन को बदलने के साथ मेरे रास्ते का उपयोग कर सकते हैं$("#input").on("input focusout",function(e){

— azerafati

Answer 4

पाठ इनपुट changeघटना को तब तक फायर नहीं करते हैं जब तक कि वे ध्यान केंद्रित नहीं करते। इनपुट के बाहर क्लिक करें और अलर्ट दिखाई देगा।

यदि पाठ इनपुट से पहले कॉलबैक को आग लगनी चाहिए, तो फोकस का उपयोग करें .keyup()।

Comments

changeयहाँ काम कर रहा है: jsfiddle.net/g6pcp ; keyupप्रत्येक कुंजी के बाद सतर्क

— रहना

@diEcho मुझे लगता है कि अलर्ट उनके कोड को काम करने के लिए सिर्फ एक उदाहरण है ... न कि वह जो अंत में करने का इरादा रखता है।

— स्कॉट हरवेल

@diEcho स्कॉट ने क्या कहा, यह सिर्फ परीक्षण के उद्देश्य के लिए था। यह है कि मैं कैसे डिबग करता हूं: डी

— डेविल्स एडवोकेट

@ कृपया कृपया बजाय के बजाय एक उचित डिबगर का उपयोग करें alert()। यह डिबगिंग को इतना आसान बना देगा।

— मैट बॉल

Answer 5

onkeyup, onpaste, onchange, oninputजब ब्राउज़र टेक्स्टबॉक्स पर ऑटोफ़िल करता है, तो यह विफल हो रहा है। इस तरह के मामले को संभालने के लिए "autocomplete='off' अपने टेक्स्टफ़ील्ड " करें ताकि ब्राउज़र को टेक्स्टबॉक्स को ऑटोफ़िल करने से रोका जा सके,

उदाहरण के लिए,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

Answer 6

मेरे मामले में, मेरे पास एक टेक्स्टबॉक्स था जो डेटापिक से जुड़ा हुआ था। एकमात्र उपाय जो मेरे लिए काम करता था, वह तारीख के onSelect घटना के अंदर इसे संभालना था।

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

Answer 7

मुझे लगता है कि आप भी उपयोग कर सकते हैं keydown:

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

Answer 8

काम कर रहे:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});

Comments

यह एक अलग प्रश्न के लिए कोड की तरह लग रहा है ... वह सामान अपरकेस मान के बारे में और सामग्री को दिखाने / छिपाने के बारे में क्या है?

— निको हसे