दिलचस्प पोस्ट
जावास्क्रिप्ट के साथ एक वेब पेज से स्क्रीन स्क्रैपिंग मैं किसी संरक्षित सदस्य को व्युत्पन्न वर्ग के एक उदाहरण से क्यों नहीं एक्सेस कर सकता हूं? जेएसपी फ़ाइल में वेब-आईएनएफ फ़ोल्डर में रखा गया एक संसाधन का संदर्भ संसाधन पर HTTP 404 देता है नोड। जेएस के साथ रीयल टाइम में वेब पेज स्क्रैप करें एक डेटाटाले में एक्सेल को जल्दी से आयात करना सरणी के लिए json_decode स्थानांतरित वस्तु से मैं क्या कर सकता हूं? कैसे एक प्रक्रिया लिनक्स पर एक और प्रक्रिया के stdout और stderr intercept कर सकते हैं? स्वीफ्ट के संपूर्ण स्विच स्टेटमेंट के लिए नोप सूची से अद्वितीय आइटम प्राप्त करना आवश्यक फ़ील्ड वैलिडेटर का उपयोग करके टेक्स्ट बॉक्स रंग बदलें। कोई एक्स्टेंडर नियंत्रण कृपया नहीं Android डिवाइस चयनकर्ता – डिवाइस नहीं दिखा रहा है ViewModelLocator MVVM लाइट में देखें मॉडेल्स दो स्ट्रिंग्स के बीच सामान्य ऑप्शन का पता लगाएं पसंद करते समय सर्वोत्तम प्रकार की अनुक्रमण

खींचने के दौरान इनपुट प्रकार = श्रेणी पर onchange ईवेंट फ़ायरफ़ॉक्स में ट्रिगर नहीं है

जब मैं <input type="range"> साथ खेला जाता हूं, तो फ़ायरफ़ॉक्स एक बदलाव की घटना को तभी चलाता है जब हम स्लाइडर को एक नई स्थिति में छोड़ दें जहां क्रोम और अन्य स्लाइडर घसीटते समय चढ़ाव की घटनाओं को ट्रिगर करते हैं।

मैं इसे फ़ायरफ़ॉक्स में खींचने पर कैसे कर सकता हूं?

एचटीएमएल

 <span id="valBox"></span> <input type="range" min="5" max="10" step="1" onchange="showVal(this.value)"> 

स्क्रिप्ट

 function showVal(newVal){ document.getElementById("valBox").innerHTML=newVal; } 

Solutions Collecting From Web of "खींचने के दौरान इनपुट प्रकार = श्रेणी पर onchange ईवेंट फ़ायरफ़ॉक्स में ट्रिगर नहीं है"

जाहिरा तौर पर क्रोम और सफ़ारी गलत हैं: उपयोगकर्ता को माउस रिलीज करते समय केवल onchange जाना चाहिए। निरंतर अपडेट प्राप्त करने के लिए, आप oninput ईवेंट का उपयोग करना चाहिए, जो माउस और कीबोर्ड से फ़ायरफ़ॉक्स, सफारी और क्रोम में लाइव अपडेट को कैप्चर करेगा।

हालांकि, oninput में oninput समर्थित नहीं है, इसलिए आपका सर्वोत्तम शर्त दो ईवेंट हैंडलर्स को गठबंधन करना है, जैसे:

 <span id="valBox"></span> <input type="range" min="5" max="10" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)"> 

अधिक जानकारी के लिए यह बगजिला धागा देखें।

अद्यतन करें: मैं इस उत्तर को डेस्कटॉप (लेकिन मोबाइल) ब्राउज़रों में रेंज / स्लाइडर इंटरैक्शन का उपयोग करने के लिए माउस ईवेंट का उपयोग करने का एक उदाहरण के रूप में छोड़ रहा हूं। हालांकि, मैंने अब भी एक पूरी तरह से अलग लिखा है और मेरा मानना ​​है कि इस पृष्ठ पर कहीं और बेहतर जवाब दिया गया है जो इस समस्या का क्रॉस-ब्राउज़र डेस्कटॉप -और-मोबाइल समाधान प्रदान करने के लिए एक अलग दृष्टिकोण का उपयोग करता है।

मूल उत्तर:

सारांश: on('input'... और / या on('change'... on('input'... उपयोग किए बिना रेंज इनपुट मूल्य पढ़ने के लिए एक क्रॉस-ब्राउज़र, सादे जावास्क्रिप्ट (यानी कोई- jQuery) समाधान जो ब्राउज़र के बीच असंगतता से काम करता है

आज (देर से फरवरी, 2016) के रूप में, अब भी ब्राउज़र असंगति है इसलिए मैं यहां एक नया काम प्रदान कर रहा हूं-यहां चारों ओर।

समस्या: एक सीमा इनपुट का उपयोग करते समय, अर्थात् एक on('input'... स्लाइडर on('input'... , on('input'... मैक और विंडोज फ़ायरफ़ॉक्स, क्रोम और ओपेरा और मैक सफारी में निरंतर अद्यतन रेंज मान प्रदान करता है, जबकि on('change'... केवल माउस-अप पर सीमा मान की रिपोर्ट करता है। इसके विपरीत, इंटरनेट एक्सप्लोरर (v11) on('input'... बिल्कुल काम नहीं करता है, और on('change'... लगातार अपडेट होता है

मैं मूसुडाउन, माउसेमोव और (संभवतः) माउसव्यूव इवेंट्स का उपयोग करके वेनिला जावास्क्रिप्ट (यानी कोई jQuery) का उपयोग करके सभी ब्राउज़रों में समान निरंतर श्रेणी मान रिपोर्टिंग के लिए यहां दो रणनीतियों की रिपोर्ट करता हूं।

रणनीति 1: कम लेकिन कम कुशल

यदि आप अधिक कुशल कोड से कम कोड पसंद करते हैं, तो आप इस पहले समाधान का उपयोग कर सकते हैं जो मॉउसडाउन और माउसमोव का उपयोग करता है, लेकिन माउसउप नहीं। यह स्लाइडर को आवश्यकतानुसार पढ़ता है, लेकिन किसी भी माउस-ओवर की घटनाओं के दौरान बेकार ही फायरिंग जारी रखता है, भले ही उपयोगकर्ता ने क्लिक न किया हो और इस प्रकार स्लाइडर को नहीं खींचते। यह अनिवार्य रूप से रेंज के मूल्य को 'मूसुडाउन' के बाद और 'माउसमोव' ईवेंट के दौरान पढ़ता है, प्रत्येक requestAnimationFrame थोड़ा-सा देरी है।

 var rng = document.querySelector("input"); read("mousedown"); read("mousemove"); function read(evtType) { rng.addEventListener(evtType, function() { window.requestAnimationFrame(function () { document.querySelector("div").innerHTML = rng.value; }); }); } 
 <div>50</div><input type="range"/> 

मैं इसे एक उत्तर के रूप में पोस्ट कर रहा हूं क्योंकि यह कम उपयोगी उत्तर के तहत टिप्पणी के बजाय इसका अपना जवाब है। मुझे इस पद्धति को स्वीकृत उत्तर से बेहतर लगता है क्योंकि यह सभी जेएस को HTML से एक अलग फाइल में रख सकता है।

स्वीकार किए गए उत्तर के तहत अपनी टिप्पणी में जेमरेलिन द्वारा दिए गए उत्तर।

 $("#myelement").on("input change", function() { //do something }); 

बस जैमे द्वारा इस टिप्पणी के बारे में पता है हालांकि यद्यपि

बस ध्यान दें कि इस समाधान के साथ, क्रोम में आप हैंडलर (एक प्रति घटना) के लिए दो कॉल प्राप्त करेंगे, इसलिए यदि आप इसकी देखभाल करते हैं, तो आपको इसके खिलाफ ध्यान देने की आवश्यकता है।

जैसे ही आप माउस को स्थानांतरित करने से रोकते हैं, और तब तब जब आप माउस बटन को छोड़ते हैं तब ईवेंट को आग लगा देगा।

सारांश:

मैं यहां एक नॉट-जे jQuery क्रॉस-ब्राउज़र डेस्कटॉप-और-मोबाइल की क्षमता प्रदान करता हूं ताकि लगातार सीमा / स्लाइडर परस्पर क्रियाओं का सामना किया जा सके, वर्तमान ब्राउज़र में कुछ संभव न हो। यह अनिवार्य रूप से सभी ब्राउज़रों को IE11 on("change"... ईवेंट या तो on("change"... या on("input"... ईवेंट on("change"... का अनुकरण करने के लिए बाध्य करता है। नया फ़ंक्शन है …

 function onRangeChange(r,f) { var n,c,m; r.addEventListener("input",function(e){n=1;c=e.target.value;if(c!=m)f(e);m=c;}); r.addEventListener("change",function(e){if(!n)f(e);}); } 

… जहां r आपकी सीमा इनपुट तत्व है और f आपके श्रोता है श्रोता को किसी भी संपर्क के बाद कहा जाएगा जो रेंज / स्लाइडर का मान बदलता है, लेकिन उन इंटरैक्शन के बाद नहीं, जो उस मूल्य को बदलते हैं, जिसमें प्रारंभिक माउस या वर्तमान स्लाइडर स्थिति में स्पर्श आदान-प्रदान या स्लाइडर के दोनों छोरों को बंद करना शामिल है।

मुसीबत:

जून 2016 की शुरुआत के अनुसार, विभिन्न ब्राउज़रों में सीमाएं / स्लाइडर उपयोग के बारे में उनका जवाब है। पांच परिदृश्य उपयुक्त हैं:

  1. वर्तमान स्लाइडर स्थिति में प्रारंभिक माउस-डाउन (या स्पर्श-प्रारंभ)
  2. प्रारंभिक माउस-डाउन (या स्पर्श-प्रारंभ) एक नए स्लाइडर स्थिति पर
  3. स्लाइडर पर 1 या 2 के बाद किसी भी बाद माउस (या स्पर्श) आंदोलन
  4. किसी भी बाद माउस (या स्पर्श) आंदोलन 1 या 2 के बाद स्लाइडर के या तो अंत
  5. अंतिम माउस-अप (या टच-एंड)

निम्न तालिका में दिखाया गया है कि कम से कम तीन अलग-अलग डेस्कटॉप ब्राउज़र्स उनके व्यवहार में किस प्रकार भिन्न हैं, जिनके ऊपर दिए गए परिदृश्यों का जवाब है:

टेबल जो उन घटनाओं के संबंध में ब्राउज़र के मतभेद दिखाते हैं जिनसे वे जवाब देते हैं और कब करते हैं

उपाय:

onRangeChange फ़ंक्शन रेंज / स्लाइडर इंटरैक्शन के लिए एक सुसंगत और पूर्वानुमानयुक्त क्रॉस-ब्राउज़र प्रतिसाद प्रदान करता है। यह सभी ब्राउज़रों को निम्न तालिका के अनुसार व्यवहार करने के लिए बाध्य करता है:

प्रस्तावित समाधान का उपयोग करते हुए सभी ब्राउज़रों के व्यवहार को प्रदर्शित करने वाली तालिका

IE11 में, कोड अनिवार्य रूप से यथास्थिति के अनुसार सभी को संचालित करने की अनुमति देता है, यानी यह "change" ईवेंट को अपने मानक तरीके से कार्य करने की अनुमति देता है और "input" ईवेंट अप्रासंगिक है क्योंकि यह कभी भी आग लगाए नहीं है। अन्य ब्राउज़रों में, "change" घटना प्रभावी ढंग से चुप हो रही है (फायरिंग से अतिरिक्त और कभी-कभी नहीं-आसानी से स्पष्ट घटनाओं को रोकने के लिए) इसके अलावा, "input" ईवेंट अपने श्रोता को केवल तब ही छुड़ाता है जब सीमा / स्लाइडर के मूल्य में परिवर्तन होता है कुछ ब्राउज़रों (जैसे फ़ायरफ़ॉक्स) के लिए यह इसलिए होता है क्योंकि श्रोताओं को ऊपरी सूची से परिदृश्य 1, 4 और 5 में प्रभावी ढंग से चुप हो गया है

(यदि आप वास्तव में किसी श्रोता को 1, 4 और / या 5 के परिदृश्य में सक्रिय करने की ज़रूरत होती है तो आप "touchstart" / "touchstart" , "mouseup" / "touchend" और / या "mouseup" / "touchend" इवेंट्स को शामिल करने का प्रयास कर सकते हैं ऐसा समाधान इस उत्तर के दायरे से परे है।)

मोबाइल ब्राउज़र्स में कार्यक्षमता:

मैंने डेस्कटॉप ब्राउज़र में इस कोड का परीक्षण किया है लेकिन किसी भी मोबाइल ब्राउज़र में नहीं। हालांकि, इस पृष्ठ पर एक और जवाब में, MBourne ने दिखाया है कि मेरा समाधान यहाँ "… मेरे द्वारा देखे जाने वाले प्रत्येक ब्राउज़र में काम करता है (Win डेस्कटॉप: IE, Chrome, Opera, FF; एंड्रॉइड क्रोम, ओपेरा और एफएफ, आईओएस सफारी) " (धन्यवाद एम्बुर्न।)

उपयोग:

इस समाधान का उपयोग करने के लिए, अपने कोड में ऊपर दिए गए सारांश (सरलीकृत / मिनिफाइड) या नीचे दिए गए डेमो कोड स्निपेट (कार्यात्मक रूप से समान लेकिन अधिक स्व-स्पष्टीकरण) से onRangeChange फ़ंक्शन शामिल करें इसे इस प्रकार शामिल करें:

 onRangeChange(myRangeInputElmt, myListener); 

जहां myRangeInputElmt आपकी वांछित है <input type="range"> DOM तत्व और myListener श्रोता / हैंडलर कार्य है जिसे आप "change" जैसी घटनाओं पर लागू करना चाहते हैं।

आपका श्रोता एक पैरामीटर-कम हो सकता है यदि वांछित हो या event पैरामीटर का उपयोग कर सकता है, यानी आपकी आवश्यकताओं के आधार पर निम्नलिखित में से कोई भी काम करेगा:

 var myListener = function() {... 

या

 var myListener = function(evt) {... 

( input तत्व से ईवेंट श्रोता को निकालना (उदाहरण के लिए removeEventListener लिए ईवेंट removeEventListener का उपयोग इस उत्तर में नहीं किया गया है।)

डेमो विवरण:

नीचे कोड स्निपेट में, onRangeChange पर फ़ंक्शन सार्वभौमिक समाधान प्रदान करता है। बाकी का कोड इसका उपयोग प्रदर्शित करने के लिए एक उदाहरण है। कोई चर जो my... शुरू होता है my... सार्वभौमिक समाधान के लिए अप्रासंगिक है और केवल डेमो के लिए मौजूद है।

डेमो रेंज / स्लाइडर मान के साथ-साथ मानक "change" , "input" और कस्टम "onRangeChange" ईवेंट को निकाल दिया गया है (क्रमश: ए, बी और सी क्रमशः)। विभिन्न ब्राउज़रों में इस स्निपेट को चलाते समय, निम्न रेंज / स्लाइडर के साथ इंटरैक्ट करने पर ध्यान दें:

  • आईई 11 में, ए और सी पंक्तियों में मान दोनों परिदृश्यों 2 और 3 में परिवर्तन करते हैं जबकि पंक्ति B कभी नहीं बदलता है
  • क्रोम और सफारी में, बी और सी पंक्तियों में मान दोनों परिदृश्य 2 और 3 में परिवर्तन करते हैं जबकि पंक्ति ए केवल परिदृश्य 5 के लिए ही है
  • फ़ायरफ़ॉक्स में, पंक्ति में मान केवल परिदृश्य 5 के लिए बदलता है, सभी पांच परिदृश्यों के लिए पंक्ति बी परिवर्तन होता है, और पंक्ति सी केवल परिदृश्य 2 और 3 के लिए ही होता है
  • उपरोक्त सभी ब्राउज़रों में, पंक्ति सी (प्रस्तावित समाधान) में परिवर्तन समान होते हैं, अर्थात केवल परिदृश्य 2 और 3 के लिए

डेमो कोड:

 // main function for emulating IE11's "change" event: function onRangeChange(rangeInputElmt, listener) { var inputEvtHasNeverFired = true; var rangeValue = {current: undefined, mostRecent: undefined}; rangeInputElmt.addEventListener("input", function(evt) { inputEvtHasNeverFired = false; rangeValue.current = evt.target.value; if (rangeValue.current !== rangeValue.mostRecent) { listener(evt); } rangeValue.mostRecent = rangeValue.current; }); rangeInputElmt.addEventListener("change", function(evt) { if (inputEvtHasNeverFired) { listener(evt); } }); } // example usage: var myRangeInputElmt = document.querySelector("input" ); var myRangeValPar = document.querySelector("#rangeValPar" ); var myNumChgEvtsCell = document.querySelector("#numChgEvtsCell"); var myNumInpEvtsCell = document.querySelector("#numInpEvtsCell"); var myNumCusEvtsCell = document.querySelector("#numCusEvtsCell"); var myNumEvts = {input: 0, change: 0, custom: 0}; var myUpdate = function() { myNumChgEvtsCell.innerHTML = myNumEvts["change"]; myNumInpEvtsCell.innerHTML = myNumEvts["input" ]; myNumCusEvtsCell.innerHTML = myNumEvts["custom"]; }; ["input", "change"].forEach(function(myEvtType) { myRangeInputElmt.addEventListener(myEvtType, function() { myNumEvts[myEvtType] += 1; myUpdate(); }); }); var myListener = function(myEvt) { myNumEvts["custom"] += 1; myRangeValPar.innerHTML = "range value: " + myEvt.target.value; myUpdate(); }; onRangeChange(myRangeInputElmt, myListener); 
 table { border-collapse: collapse; } th, td { text-align: left; border: solid black 1px; padding: 5px 15px; } 
 <input type="range"/> <p id="rangeValPar">range value: 50</p> <table> <tr><th>row</th><th>event type </th><th>number of events </th><tr> <tr><td>A</td><td>standard "change" events </td><td id="numChgEvtsCell">0</td></tr> <tr><td>B</td><td>standard "input" events </td><td id="numInpEvtsCell">0</td></tr> <tr><td>C</td><td>new custom "onRangeChange" events</td><td id="numCusEvtsCell">0</td></tr> </table> 

एंड्रयू विलम के समाधान मोबाइल उपकरण संगत नहीं हैं।

यहां उनके दूसरे समाधान का संशोधन है जो एज, आईई, ओपेरा, एफएफ, क्रोम, आईओएस सफारी और मोबाइल समकक्ष (जो मैं परीक्षण कर सकता था) में काम करता है:

अद्यतन 1: निकाला गया "requestAnimationFrame" भाग, जैसा कि मैं सहमत हूं कि यह आवश्यक नहीं है:

 var listener = function() { // do whatever }; slider1.addEventListener("input", function() { listener(); slider1.addEventListener("change", listener); }); slider1.addEventListener("change", function() { listener(); slider1.removeEventListener("input", listener); }); 

अपडेट 2: एंड्रयू के 2 जून 2016 को उत्तर अपडेट किया गया उत्तर:

धन्यवाद, एंड्रयू – जो मेरे पास हर ब्राउज़र में काम करने लगता है (जीत डेस्कटॉप: आईई, क्रोम, ओपेरा, एफएफ; एंड्रॉइड क्रोम, ओपेरा और एफएफ, आईओएस सफारी)।

3 अपडेट करें: यदि ("स्लाइडर पर ऑनइनपुट") समाधान

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

 if ("oninput" in slider1) { slider1.addEventListener("input", function () { // do whatever; }, false); } 

लेकिन आपके समाधान की जांच करने से पहले, मैंने देखा कि यह आईई में फिर से काम कर रहा था – शायद कुछ अन्य संघर्ष थे।

एक अच्छा क्रॉस-ब्राउज़र व्यवहार, कम और समझने योग्य कोड के लिए, एक फॉर्म के संयोजन में ऑन-चेंज एट्रिब्यूट का सर्वोत्तम उपयोग करना है:

यह एक html / javascript केवल समाधान है, और साथ ही इन-लाइन का उपयोग किया जा सकता है

 function showVal(){ document.getElementById("valBox").innerHTML=document.getElementById("inVal").value; } 
 <form onchange="showVal()"> <input type="range" min="5" max="10" step="1" id="inVal"> </form> <span id="valBox"> </span> 

आप जावस्क्रिप्ट "ऑनडाग" घटना का इस्तेमाल लगातार आग लगा सकते हैं निम्नलिखित कारणों से यह "इनपुट" से बेहतर है,

  1. ब्राउज़र समर्थन,
  2. "ondrag" और "परिवर्तन" घटना के बीच अंतर हो सकता है खींचें और परिवर्तन दोनों के लिए "इनपुट" आग।

Jquery में:

  $ ( '# नमूना')। पर ( 'खींचें', समारोह (ई) {

 }); 

रेफरी: http://www.w3schools.com/TAgs/ev_ondrag.asp