इनपुट प्रकार = "टेक्स्ट" में ऑन-यू-टाइप के रूप में अदृश्य को ट्रैक करने का सबसे अच्छा तरीका?


313

मेरे अनुभव में, input type="text"onchange ईवेंट आमतौर पर नियंत्रण (blur) नियंत्रण के बाद होता है।

क्या हर बार textfield सामग्री परिवर्तन को ट्रिगर करने के लिए ब्राउज़र को मजबूर करने का कोई तरीका है? यदि नहीं, तो यह "मैन्युअल रूप से" ट्रैक करने का सबसे शानदार तरीका क्या है?

onkey* ईवेंट का उपयोग विश्वसनीय नहीं है, क्योंकि आप फ़ील्ड पर राइट-क्लिक कर सकते हैं और पेस्ट चुन सकते हैं, और यह बिना किसी कीबोर्ड इनपुट के फ़ील्ड को बदल देगा।

setTimeout है एक ही तरीका है? .. बदसूरत :-)

204

अद्यतन:

देखें Another answer (2015)।


मूल 2009 उत्तर:

तो, आप onchange घटना keydown पर सक्रिय करना चाहते हैं, धुंधला, और पेस्ट? वह जादू है।

यदि आप टाइप करते समय परिवर्तनों को ट्रैक करना चाहते हैं, तो "onkeydown" का उपयोग करें। यदि आपको माउस के साथ पेस्ट ऑपरेशन को फंसाने की ज़रूरत है, तो "onpaste" (IE, FF3) और "oninput" (FF, Opera, Chrome, Safari) का उपयोग करें।

सफारी पर <textarea> के लिए टूटा हुआ। textInput के बजाय

  0

आप IE में oninput की जाँच नहीं की है (इस पर एक मैक नहीं है)? क्योंकि पेस्ट की जांच स्वयं पर्याप्त नहीं है: उदाहरण के लिए, आप चुन सकते हैं और कट कर सकते हैं। धन्यवाद। 22 feb. 092009-02-22 20:32:53

+14

'ऑनकीप्रेस' के बजाय 'ऑनकीप्रेस' का उपयोग किया जाना चाहिए। जब एक कुंजी पर क्लिक किया जाता है तो 'ऑनकीडाउन' आग लगती है। यदि कोई उपयोगकर्ता कुंजी रखता है, तो ईवेंट केवल पहले वर्ण के लिए आग लग जाएगा। जब भी टेक्स्ट फ़ील्ड में एक char जोड़ा जाता है तो 'ऑनकीप्रेस' आग लगती है। 12 mar. 122012-03-12 17:22:36

+50

उन सभी कार्यों पर 'बदले' आग लगाने के लिए काफी जादू नहीं है। '<इनपुट विनिमय =" कुछ कुछ(); " onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();"> 'अधिकांश के लिए काफी अच्छा होगा। 25 apr. 122012-04-25 11:09:18

  0

माउस का उपयोग कर इनपुट बॉक्स में कुछ पाठ हटाने के बारे में क्या? मुझे नहीं लगता कि यह काम करेगा। 27 aug. 122012-08-27 06:49:42

+1

मैं @DeaDEnD से सहमत हूं। असल में, मुझे लगता है कि घटनाओं के तीनों 'इनपुट' + 'ऑनप्रोपर्टीएन्चेंज' + 'ऑनकीप्रेस' 'इनपुट '+' ऑनपेस्ट '+' ऑनकीडाउन 'से बेहतर है। 'onpropertychange' आईई के समकक्ष 'इनपुट' है। 25 dec. 122012-12-25 10:43:22

  0

'ऑनकीप 'या' ऑनकीप्रेस ' 26 mar. 132013-03-26 15:52:01

+42

jquery 1.8.3 के साथ, जैसा दिखता है:' $()। ('चेंज कीडाउन पेस्ट इनपुट', फ़ंक्शन() {}) ' 01 jun. 132013-06-01 22:34:13

+16

टेक्स्ट प्राप्त करने के बाद टेक्स्ट प्राप्त करने के लिए ऑनकीप का उपयोग करें बदल गया ... 11 dec. 132013-12-11 11:23:43

  0

यदि 'ऑनकीडाउन' का उपयोग करना है तो '.isChar' की जांच करना और' शिफ्ट ',' 'कंट्रोल', आदि जैसे '.key' मानों को फ़िल्टर करना एक अच्छा विचार हो सकता है ... 25 nov. 142014-11-25 04:28:56

  0

यह यह ध्यान देने योग्य हो सकता है कि, spec के अनुसार, onpaste रद्द करने योग्य है, जबकि oninput नहीं है। 06 aug. 152015-08-06 08:40:51

+1

नीचे @ रॉबर्ट-सीमेर का जवाब देखें। यह नया स्वीकार्य उत्तर होना चाहिए। 01 feb. 162016-02-01 23:19:01

  0

@MaxPMagee: यार यह चाहिए। ढेर इन दिनों पुरानी जानकारी की इतनी बर्बाद भूमि है। मैंने इस जवाब को संदर्भ [@ रॉबर्टसिमर के उत्तर] में अपडेट किया है (http://stackoverflow.com/a/26202266/45433)। मेरे पास 7 साल के पुराने उत्तरों को पुलिस करने का समय नहीं है, इसलिए इसे मेरे ध्यान में लाने के लिए धन्यवाद! 02 feb. 162016-02-02 15:20:38

  0

यह उत्तर अस्वीकृत है ... रॉबर्ट सीमेर जवाब देखें आधुनिक और एक बेहतर 02 apr. 172017-04-02 21:36:09

+1

@AriWais: हाँ, ओम अधिकांश एसओ को बहिष्कृत किया जाना चाहिए। लोग यह जवाब * 8 साल पुराना है *। मेरी इच्छा है कि इस तरह के पुराने उत्तरों के लिए "बहिष्कृत" बटन था, और समुदाय बेहतर विकल्प चुन सकता था। 03 apr. 172017-04-03 14:48:14


3

साथ ही आप keydown, keyup और keypress घटनाओं इस्तेमाल कर सकते हैं।


5

मेरे पास एक समान आवश्यकता थी (ट्विटर शैली टेक्स्ट फ़ील्ड)। प्रयुक्त onkeyup और onchangeonchange वास्तव में क्षेत्र से खोए गए फोकस के दौरान माउस पेस्ट ऑपरेशंस का ख्याल रखता है।

[अपडेट] एचटीएमएल 5 या बाद में, वास्तविक समय चरित्र संशोधन अद्यतन प्राप्त करने के लिए oninput का उपयोग करें, जैसा ऊपर दिए गए अन्य उत्तरों में बताया गया है।

  0

यदि आप टेक्स्टरेरा, इनपुट: टेक्स्ट, इनपुट: पासवर्ड या इनपुट की सामग्री का पता लगाना चाहते हैं तो ऑनिनपूट उपयोगी होता है: खोज तत्व बदल गया है, क्योंकि इन तत्वों पर अस्थिर घटना तब होती है जब तत्व फोकस खो देता है, तुरंत नहीं संशोधन। 04 may. 122012-05-04 08:59:28

  0

@ hkasera हां, HTML5 'oninput' के साथ जाने का तरीका है। लेकिन, जब मैंने कार्यान्वित किया, एचटीएमएल 5 अस्तित्व में नहीं था और हमारे पास आईई 8 :(था। मैं आपके अपडेट की सराहना करता हूं क्योंकि यह उपयोगकर्ताओं के लिए अद्यतित जानकारी प्रदान करता है। 08 may. 142014-05-08 18:47:38


7

onkeyup आप उदाहरण के लिए टाइप करने के बाद क्या होता है मैं t प्रेस जब मैं उंगली कार्रवाई लेकिन keydown कार्रवाई मैं अंकों चरित्र t

आशा इस किसी के लिए उपयोगी है से पहले होता है पर होता उठा।

तो onkeyup तब बेहतर है जब आप अभी जो टाइप करना चाहते हैं उसे भेजना चाहते हैं।


6

आप केवल इंटरनेट एक्सप्लोरर का उपयोग करते हैं, तो आप इस का उपयोग कर सकते हैं:

<input type="text" id="myID" onpropertychange="TextChange(this)" /> 

<script type="text/javascript"> 
    function TextChange(tBox) { 
     if(event.propertyName=='value') { 
      //your code here 
     } 
    } 
</script> 

आशा है कि मदद करता है।

+131

"यदि आप केवल इंटरनेट एक्सप्लोरर का उपयोग करते हैं" ??? :) 30 sep. 112011-09-30 13:18:55

+6

मुझे लगता है कि एक इन-हाउस परियोजना के लिए हो सकता है ... :) 12 dec. 122012-12-12 21:23:21

+79

भगवान का शुक्र है मैं उस घर में नहीं रहता! : डी 03 apr. 132013-04-03 14:42:09

+9

10 साल पहले इस वाक्य में कुछ भी मजाकिया नहीं होगा .. :( 16 mar. 142014-03-16 16:26:19

+3

मेरे लिए यह मदद करता है, मैं कुछ मोबाइल के लिए एक एम्बेडेड ओएस के साथ एक परियोजना विकसित कर रहा हूं जहां आईई एकमात्र ब्राउज़र है। 22 sep. 142014-09-22 11:47:03

+1

यदि आप केवल इंटरनेट का उपयोग करते हैं एक्सप्लोरर - एलओएल। 2016 में मेरा दिन बनाया! 07 oct. 162016-10-07 13:55:05


4

वहाँ एक काफी पास समाधान (सभी का पेस्ट तरीके ठीक नहीं है), लेकिन है उनमें से ज्यादातर:

यह इनपुट के लिए और साथ ही textareas के लिए काम करता है:

<input type="text" ... > 
<textarea ... >...</textarea> 

इस तरह कार्य करें:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" > 
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea> 

जैसा कि मैंने कहा, सभी ब्राउज़रों पर एक घटना को आग लगाने के सभी तरीकों से नहीं ... सबसे बुरी तरह से किसी भी घटना को आग नहीं लगती है, लेकिन टाइमर इस तरह के लिए उपयोग करने के लिए भयानक हैं।

लेकिन अधिकांश पेस्ट तरीके कुंजीपटल और/या माउस के साथ किए जाते हैं, इसलिए आम तौर पर एक पेस्ट के बाद एक ऑनकीप या ऑनमूसअप निकाल दिया जाता है, कीबोर्ड पर टाइप करते समय ऑनकीप को निकाल दिया जाता है।

सुनिश्चित करें कि यार चेक कोड में अधिक समय नहीं लगता है ... अन्यथा उपयोगकर्ता को खराब अपमान मिलता है।

हां, चाल कुंजी और माउस पर आग लगाना है ... लेकिन सावधान रहें दोनों को निकाल दिया जा सकता है, इसलिए इस तरह ध्यान रखें !!!


30

जावास्क्रिप्ट यहां अप्रत्याशित और मजाकिया है।

  • onchange केवल तब होता है जब आप पाठ बॉक्स
  • onkeyup & onkeypress हमेशा पाठ परिवर्तन
  • onkeydown पाठ परिवर्तन पर होता है पर नहीं होती है (लेकिन माउस क्लिक के साथ & पेस्ट कटौती ट्रैक नहीं कर सकते)
  • धुंधला onpaste & oncut कुंजीपटल के साथ होता है और माउस के साथ भी दायाँ क्लिक करें।

तो, पाठ बॉक्स में परिवर्तन ट्रैक करने के लिए, हम onkeydown, oncut और onpaste की जरूरत है। इन ईवेंट के कॉलबैक में, यदि आप टेक्स्टबॉक्स के मान की जांच करते हैं तो आपको अपडेटेड वैल्यू नहीं मिलता है क्योंकि कॉलबैक के बाद मान बदल जाता है। तो इसके लिए एक समाधान परिवर्तन को ट्रैक करने के लिए 50 मिलीली-सेकंड (या कम हो सकता है) के टाइमआउट के साथ टाइमआउट फ़ंक्शन सेट करना है।

यह एक गंदे हैक है लेकिन यह एकमात्र तरीका है, जैसा कि मैंने शोध किया था।

यहां एक उदाहरण है। http://jsfiddle.net/2BfGC/12/

+3

'ऑनिनपूट' और 'टेक्स्ट इनपुट' ऐसी घटनाएं हैं जो इसके लिए वास्तविक समाधान हैं, लेकिन यह सभी ब्राउज़रों द्वारा समर्थित नहीं है। 05 jul. 122012-07-05 06:59:38

+1

'ऑनकट' 19 nov. 142014-11-19 05:15:11

  0

का उल्लेख करने के लिए धन्यवाद दूसरी बुलेट के लिए बिंदु मुझे लगता है कि आपका मतलब है 'ऑनकीप' और 'ऑनकीडाउन', जो समान हैं। दोनों Ctrl, Alt, Shift, और मेटा कुंजियों को कैप्चर कर सकते हैं। तीसरे बुलेट बिंदु के लिए मुझे लगता है कि आपको 'ऑनकीप्रेस' का मतलब है। 22 feb. 182018-02-22 14:56:49


2

कृपया, न्यायाधीश अगले दृष्टिकोण JQuery का उपयोग कर:

HTML:

<input type="text" id="inputId" /> 

जावास्क्रिप्ट (JQuery):

$("#inputId").keyup(function(){ 
     $("#inputId").blur(); 
     $("#inputId").focus(); 
}); 

$("#inputId").change(function(){ 
     //do whatever you need to do on actual change of the value of the input field 
}); 
  0

मैं उसी तरह उपयोग करता हूं:) 25 jun. 152015-06-25 18:26:21

  0

मुझे एहसास है कि यह नवीनतम जवाब नहीं है, लेकिन कर्सर प्लेसमेंट को हर कुंजीपटल पर इनपुट को धुंधला और फिर से ध्यान केंद्रित नहीं करेगा अगर यह कहीं भी था इनपुट के अंत को छोड़कर? 02 may. 172017-05-02 16:26:04

  0

@ माइकलमार्टिन-स्मकर आप ऐसा सोचेंगे, लेकिन स्पष्ट रूप से नहीं: https://jsfiddle.net/gsss8c6L/ 04 jul. 172017-07-04 03:31:46


395

इन दिनों oninput के लिए सुन। यह तत्व पर ध्यान केंद्रित करने की आवश्यकता के बिना onchange जैसा लगता है। यह एचटीएमएल 5 है।

यह आईई 8 और उससे नीचे के अलावा सभी (यहां तक ​​कि मोबाइल) द्वारा समर्थित है। आईई के लिए onpropertychange जोड़ें।मैं इसे इस तरह उपयोग करता हूं:

<script> 
    onload = function() { 
     var e = document.getElementById('myInput'); 
    e.oninput = myHandler; 
     e.onpropertychange = e.oninput; // for IE8 
     // e.onchange = e.oninput; // FF needs this in <select><option>... 
     // other things for onload() 
    }; 
</script> 
<input type=text id=myInput> 
+26

वेब मानकों की तरह कभी भी बदलती दुनिया में, कभी-कभी स्वीकार्य उत्तर कुछ वर्षों के बाद बदला जा सकता है ... यह मेरे लिए नया स्वीकार्य उत्तर है। 25 nov. 152015-11-25 15:50:08


3

"इनपुट" मेरे लिए काम करता है।

var searchBar = document.getElementById("searchBar"); 
searchBar.addEventListener("input", PredictSearch, false); 

26

कोड नीचे jQuery के साथ मेरे लिए ठीक काम करता है 1.8.3

HTML: <input type="text" id="myId" />

जावास्क्रिप्ट/JQuery:

$("#myId").on('change keydown paste input', function(){ 
     doSomething(); 
}); 
+7

jQuery ** लाइब्रेरी ** प्रश्न में टैग नहीं किया गया है। 16 feb. 152015-02-16 21:03:48

+12

Jquery एक जावास्क्रिप्ट एपीआई है, और मुझे यहां jquery कीवर्ड के साथ एक खोज से लाया गया था, मुझे नहीं लगता कि यह jquery उत्तर के लिए प्रत्येक जावास्क्रिप्ट qustion के लिए एक नया सवाल बनाने लायक है ... 27 may. 152015-05-27 12:12:49

+5

अगर लोगों को सुझाव देने की अनुमति नहीं थी उत्तर में पुस्तकालयों का उपयोग SO 17 dec. 152015-12-17 03:01:24

  0

पर कई बार अनुत्तरित प्रश्न होंगे कई बार आग लगती है। परिवर्तन और कीडाउन के कारण शायद। संभावित इनपुट केवल यहां जरूरी है। 01 sep. 172017-09-01 11:09:32


2

प्रत्येक इस उदाहरण कोशिश करते हैं और ट्रैक से पहले पूरी तरह से करने के लिए कर्सर ब्लिंक दर शून्य पर कम करें।

<body> 
 
//try onkeydown,onkeyup,onkeypress 
 
<input type="text" onkeypress="myFunction(this.value)"> 
 
<span> </span> 
 
<script> 
 
function myFunction(val) { 
 
//alert(val); 
 
var mySpan = document.getElementsByTagName("span")[0].innerHTML; 
 
mySpan += val+"<br>"; 
 
document.getElementsByTagName("span")[0].innerHTML = mySpan; 
 
} 
 
</script> 
 

 
</body>

onBlur: घटना से बाहर निकलें

onchange पर उत्पन्न करता है: घटना बाहर निकलने पर जेनरेट करती है कोई भी परिवर्तन inputtext में किए गए

onkeydown: घटना (कुंजी के लिए किसी भी कुंजी दबाने पर उत्पन्न करता है लंबे समय तक पकड़ना)

ऑनकीप: ईवेंट किसी भी प्रमुख रिलीज पर उत्पन्न होता है

onkeypress: एक ही रूप में onkeydown (या onkeyup), लेकिन ctrl, backsace, अन्य ऑल्ट के लिए प्रतिक्रिया नहीं