इनपुट-टाइप = "टेक्स्ट" में ऑनकॉन्ग को ट्रैक करने का सबसे अच्छा तरीका?

449

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

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

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

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

javascript html forms

— इल्या बिरमन
स्रोत

@ यदि आपके पास अपने स्वीकृत उत्तर को अपडेट करने का कोई मौका है, ताकि किसी एक को शीर्ष पर पिन न किया जाए?

— 13

271

अपडेट करें:

एक और जवाब (2015) देखें ।

मूल 2009 उत्तर:

तो, आप चाहते हैं कि onchangeईवेंट कीपैड, ब्लर और पेस्ट में आग लग जाए ? वह जादू है।

यदि आप परिवर्तनों को ट्रैक करना चाहते हैं, तो वे उपयोग करते हैं "onkeydown"। यदि आपको माउस के साथ पेस्ट संचालन को फंसाना है, तो "onpaste"( IE , FF3 ) और "oninput"( FF, ओपेरा, क्रोम, सफारी ¹ ) का उपयोग करें।

¹_{सफारी के}_{लिए टूट <textarea>गया। textInputइसके बजाय उपयोग करें}

— वर्धमान ताजा
स्रोत

22

onkeypressके बजाय का उपयोग किया जाना चाहिए onkeydown। onkeydownजब कोई कुंजी क्लिक की जाती है तो आग लग जाती है। यदि कोई उपयोगकर्ता एक कुंजी रखता है, तो घटना केवल पहले वर्ण के लिए एक बार फायर करेगी। onkeypressजब भी कोई चर पाठ क्षेत्र में जोड़ा जाता है तो आग लग जाती है।

— fent

61

यह onchangeउन सभी कार्यों में आग बनाने के लिए काफी जादू नहीं है । <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">अधिकांश के लिए काफी अच्छा करेंगे।

— आरोह

1

माउस का उपयोग करके इनपुट बॉक्स में कुछ पाठ को हटाने के बारे में क्या? मुझे नहीं लगता कि यह काम करेगा।

— जीवन

47

$().on('change keydown paste input', function() {})

— जकुरी

4

@AriWais: हाँ, omg के अधिकांश तो पदावनत होना चाहिए। दोस्तों यह जवाब 8 साल पुराना है । काश, इस तरह के पुराने उत्तरों के लिए एक "डिप्रेसेट" बटन होता, और समुदाय बेहतर चुन सकता था।

— वर्धमान ताजा

658

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

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

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler);

<input id="source">
<div id="result"></div>

स्निपेट का विस्तार करें

— रॉबर्ट सीमर
स्रोत

63

वेब मानकों की तरह कभी बदलती दुनिया में, कभी-कभी कुछ वर्षों के बाद स्वीकृत उत्तर को बदला जा सकता है ... यह मेरे लिए नया स्वीकृत उत्तर है।

— एरिक पेट्रुकेली

1

oninputIE9 में भी समर्थन हालांकि आंशिक है ( caniuse.com/#feat=input-event )।

— केनस्टन चोई

इसके innerTextस्थान पर innerHTMLइसका उपयोग करना सार्थक हो सकता है, ताकि किसी भी मार्कअप का प्रतिपादन न हो

— जीवन टेकार

47

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

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

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

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

— अमृत पाल सिंह
स्रोत

11

प्रश्न में jQuery लाइब्रेरी को टैग नहीं किया गया है।

— जॉन वीज़

21

Jquery एक जावास्क्रिप्ट एपीआई है, और मुझे Jquery कीवर्ड के साथ एक खोज के द्वारा यहाँ लाया गया था, मुझे नहीं लगता कि यह Jquery के उत्तर के लिए प्रत्येक जावास्क्रिप्ट

— क्वैश्चन

12

अगर लोगों को जवाब में पुस्तकालयों के उपयोग का सुझाव देने की अनुमति नहीं थी, तो एसओ पर बहुत अधिक अनुत्तरित प्रश्न होंगे

— डाइटबाकन

3

कई बार आग लग जाती है। संभवतः परिवर्तन और कीडाउन के कारण। केवल इनपुट की आवश्यकता है।

— एमएमएम

1

आपको इसकी आवश्यकता नहीं है keydownक्योंकि यह इनपुट के मूल्य की नकल करेगा, इसे हटा दें।

— यूसुफ अल सुबाई

43

यहाँ जावास्क्रिप्ट अप्रत्याशित और मज़ेदार है।

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

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

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

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

— साकेत साहू
स्रोत

4

oninputऔर textInputऐसी घटनाएँ हैं जो इसके लिए वास्तविक समाधान है लेकिन, सभी ब्राउज़रों द्वारा समर्थित नहीं है।

— साकेत साहू

दूसरी गोली बिंदु के लिए मेरा मतलब है कि आप onkeyupऔर onkeydown, जो समान हैं। दोनों Ctrl, Alt, Shift, और मेटा कुंजियों को कैप्चर कर सकते हैं। तीसरी गोली बिंदु के लिए मेरा मतलब है कि आप onkeypress।

— डैनियल स्टीवंस

12

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

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

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

— फर्नांडो एंड्रे
स्रोत

8

मुझे एक समान आवश्यकता थी (ट्विटर शैली पाठ क्षेत्र)। इस्तेमाल किया onkeyupऔर onchange। onchangeवास्तव में क्षेत्र से खोए फोकस के दौरान माउस पेस्ट संचालन का ध्यान रखता है।

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

— मोहनीश
स्रोत

यदि आप एक टेक्स्टएरिया की सामग्री, इनपुट: टेक्स्ट, इनपुट: पासवर्ड या इनपुट: खोज तत्व को बदलना चाहते हैं, तो ऑनिनपुट उपयोगी है, क्योंकि इन तत्वों पर ऑन्चेंज घटना तब होती है जब तत्व फोकस खो देता है, संशोधन के तुरंत बाद नहीं। ।

— हेकसेरा

@hkasera हाँ, HTML5 के साथ oninputजाने का रास्ता है। लेकिन, जब मैंने लागू किया, तो HTML5 मौजूद नहीं था और हमारे पास IE 8 :( था। मैंने आपके अपडेट की सराहना की क्योंकि यह उपयोगकर्ताओं के लिए अद्यतित जानकारी प्रदान करता है।

— मोहिनी

8

मुझे लगता है कि 2018 में inputघटना का उपयोग करना बेहतर है ।

-

जैसा कि WHATWG कल्पना वर्णन ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

उपयोगकर्ता द्वारा मूल्य बदलने पर नियंत्रणों पर फायर किया गया ( परिवर्तन घटना भी देखें )

-

इसका उपयोग कैसे करना है, इसका एक उदाहरण यहां दिया गया है:

<input type="text" oninput="handleValueChange()">

— पैट्रिक हिलर्ट
स्रोत

7

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

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

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

उम्मीद है की वो मदद करदे।

— RolandDeschain
स्रोत

8

एक घर में परियोजना के लिए हो सकता है मुझे लगता है ... :)

— eselk

94

भगवान का शुक्र है कि मैं उस घर में नहीं रहता! : डी

— मार्को माताराज़ी

13

10 साल पहले इस वाक्य में कुछ भी मजेदार नहीं होगा ..:

— मिशैल टैबर

4

मेरे लिए यह मदद करता है, मैं एक एम्बेडेड ओएस के साथ कुछ मोबाइल के लिए एक प्रोजेक्ट विकसित कर रहा हूं जहां IE एकमात्र ब्राउज़र है।

— एंडर्स एम।

3

यदि आप केवल Internet Explorer - LOL का उपयोग करते हैं। 2016 में मेरा दिन बना!

— जैक ब्लैक

4

एक काफी निकट समाधान है (सभी पेस्ट तरीके ठीक न करें) लेकिन उनमें से अधिकांश:

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

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

इसे अवश्य पसंद करें:

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

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

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

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

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

— z666zz666z
स्रोत

4

कृपया, 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
});

— एलेक्स उके
स्रोत

मैं उसी तरह का उपयोग करता हूं

— :)

मुझे लगता है कि यह नवीनतम उत्तर नहीं है, लेकिन धुंधला नहीं होगा और हर कीप पर इनपुट को फिर से फोकस करते हुए कर्सर प्लेसमेंट को बढ़ा देगा यदि यह इनपुट के अंत को छोड़कर कहीं भी था?

— माइकल मार्टिन-स्मकर

@ MichaelMartin-Smucker आप ऐसा सोचते होंगे, लेकिन जाहिरा तौर पर नहीं: jsfiddle.net/gsss8c6L

— Clonkex

4

"इनपुट" ने मेरे लिए काम किया।

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

— सैम
स्रोत

3

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

— Gumbo
स्रोत

3

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

<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: ईवेंट से बाहर निकलता है अगर कोई इनपुट इनपुट में किए गए परिवर्तन

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

onkeyup: घटना किसी भी महत्वपूर्ण रिलीज़ पर उत्पन्न होती है

onkeypress: onkeydown (या onkeyup) के समान लेकिन ctrl, backsace, alt अन्य के लिए कोई प्रतिक्रिया नहीं करेगा

— वेंकट
स्रोत

1

2018 यहां, मैं यही करता हूं:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

यदि आप इस दृष्टिकोण में खामियों को इंगित कर सकते हैं, तो मैं आभारी रहूंगा।

— A20
स्रोत

2

2019 यहां, और यह प्रत्येक कुंजी के लिए कई बार आग लगाएगा। एक उदाहरण के लिए, यहां देखें: jsfiddle.net/sp00n82/3r4691tq/5

— sp00n

1

विधि 1: के लिए एक ईवेंट श्रोता जोड़ें input:

element.addEventListener("input", myFunction);

विधि 2:oninput जावास्क्रिप्ट के साथ संपत्ति को परिभाषित करें :

element.oninput = function()
{
    myFunction();
};

विधि 3:oninput HTML के साथ गुण परिभाषित करें :

<input type="text" oninput="myFunction();">

— Pikamander2
स्रोत

0

IE8 में रॉबर्ट सीमर addEventListener समर्थित नहीं है।

"IE के पुराने संस्करणों ने एक समतुल्य, मालिकाना EventTarget.attachEvent () विधि का समर्थन किया।" https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

— bpolelli
स्रोत

यह एक नए उत्तर की तुलना में मौजूदा उत्तर के लिए एक टिप्पणी की तरह है

— slfan