जब मैं साथ खेलता था <input type="range">, फ़ायरफ़ॉक्स एक ऑनकॉन्ग इवेंट को केवल तभी चलाता है जब हम स्लाइडर को एक नए स्थान पर छोड़ते हैं जहां क्रोम और अन्य लोग ऑन्कॉन्ग इवेंट को ट्रिगर करते हैं जबकि स्लाइडर को खींचा जाता है।
फ़ायरफ़ॉक्स में खींचने पर मैं इसे कैसे बना सकता हूं?
function showVal(newVal){
document.getElementById("valBox").innerHTML=newVal;
}<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">जवाबों:
जाहिरा तौर पर क्रोम और सफारी गलत हैं: onchangeकेवल तभी ट्रिगर किया जाना चाहिए जब उपयोगकर्ता माउस को रिलीज़ करता है। निरंतर अपडेट प्राप्त करने के लिए, आपको oninputइवेंट का उपयोग करना चाहिए , जो माउस और कीबोर्ड दोनों से फ़ायरफ़ॉक्स, सफारी और क्रोम में लाइव अपडेट कैप्चर करेगा।
हालाँकि, oninputIE10 में समर्थित नहीं है, इसलिए आपका सबसे अच्छा दांव दो ईवेंट हैंडलर को मिलाना है, जैसे:
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1"
oninput="showVal(this.value)" onchange="showVal(this.value)">
अधिक जानकारी के लिए इस Bugzilla धागे की जाँच करें ।
$("#myelement").on("input change", function() { doSomething(); });jQuery के साथ।
onchange()जैसे मोबाइल वेब पर काम नहीं करता है Android Chromeऔर iOS Safari। कोई वैकल्पिक सुझाव?
सारांश:
मैं यहाँ एक j-jQuery क्रॉस-ब्राउज़र डेस्कटॉप-एंड-मोबाइल की क्षमता प्रदान करता हूं, जो कि वर्तमान ब्राउज़र / रेंज इंटरैक्शन का लगातार जवाब देने की क्षमता है, जो वर्तमान ब्राउज़रों में संभव नहीं है। यह अनिवार्य रूप से सभी ब्राउज़रों को on("change"...उनके on("change"...या on("input"...घटनाओं के लिए IE11 की घटना का अनुकरण करने के लिए मजबूर करता है । नया कार्य है ...
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 की शुरुआत में, विभिन्न ब्राउज़र इस बात के संदर्भ में भिन्न हैं कि वे रेंज / स्लाइडर के उपयोग पर कैसे प्रतिक्रिया देते हैं। पांच परिदृश्य प्रासंगिक हैं:
निम्न तालिका से पता चलता है कि कम से कम तीन अलग-अलग डेस्कटॉप ब्राउज़र उनके व्यवहार में भिन्न होते हैं जिनके संबंध में वे उपरोक्त परिदृश्यों में से किसके प्रति प्रतिक्रिया करते हैं:
उपाय:
onRangeChangeसमारोह रेंज / स्लाइडर बातचीत के लिए एक सुसंगत और उम्मीद के मुताबिक क्रॉस-ब्राउज़र प्रतिक्रिया प्रदान करता है। यह सभी ब्राउज़रों को निम्न तालिका के अनुसार व्यवहार करने के लिए मजबूर करता है:
IE11 में, कोड अनिवार्य रूप से यथास्थिति के अनुसार सब कुछ संचालित करने की अनुमति देता है, अर्थात यह "change"घटना को अपने मानक तरीके से कार्य करने की अनुमति देता है और यह "input"घटना अप्रासंगिक है क्योंकि यह कभी भी आग नहीं लगाती है। अन्य ब्राउज़रों में, "change"घटना को प्रभावी ढंग से चुप कराया जाता है (गोलीबारी से अतिरिक्त और कभी-कभी आसानी से स्पष्ट घटनाओं को रोकने के लिए)। इसके अलावा, "input"ईवेंट श्रोता को तब ही फायर करता है जब रेंज / स्लाइडर का मान बदलता है। कुछ ब्राउज़रों (जैसे फ़ायरफ़ॉक्स) के लिए यह होता है क्योंकि श्रोता प्रभावी रूप से उपरोक्त सूची से 1, 4 और 5 परिदृश्यों में चुप हो जाता है।
(आप वास्तव में एक श्रोता की आवश्यकता होती है या तो परिदृश्य 1, 4 और / या 5 आप को शामिल की कोशिश कर सकते में सक्रिय होने के लिए "mousedown"/ "touchstart", "mousemove"/ "touchmove"और / या "mouseup"/ "touchend"घटनाओं। इस तरह के एक समाधान इस उत्तर के दायरे से बाहर है।)
मोबाइल ब्राउज़रों में कार्यक्षमता:
मैंने इस कोड को डेस्कटॉप ब्राउज़रों में परीक्षण किया है, लेकिन किसी भी मोबाइल ब्राउज़र में नहीं। हालांकि, इस पृष्ठ पर एक अन्य उत्तर में एमबीउरने ने दिखाया है कि मेरा समाधान यहां "... मुझे मिल सकने वाले प्रत्येक ब्राउज़र में काम करता है (जीत डेस्कटॉप: IE, क्रोम, ओपेरा, एफएफ; एंड्रॉइड क्रोम, ओपेरा और एफएफ, आईओएस सफारी) ” । (धन्यवाद एमबीउरन।)
उपयोग:
इस समाधान का उपयोग करने के लिए, onRangeChangeऊपर दिए गए सारांश (सरलीकृत / छोटा) या डेमो कोड स्निपेट नीचे दिए गए फ़ंक्शन (कार्यात्मक रूप से समान लेकिन अधिक आत्म-व्याख्यात्मक) को अपने कोड में शामिल करें। इसे निम्नानुसार लागू करें:
onRangeChange(myRangeInputElmt, myListener);myRangeInputElmtआपका इच्छित <input type="range">DOM तत्व कहाँ है और myListenerश्रोता / हैंडलर फ़ंक्शन है जिसे आप समान "change"घटनाओं के लिए आमंत्रित करना चाहते हैं।
आपका श्रोता पैरामीटर-कम हो सकता है यदि वांछित है या eventपैरामीटर का उपयोग कर सकता है , अर्थात निम्नलिखित में से कोई भी आपकी आवश्यकताओं के आधार पर काम करेगा:
var myListener = function() {...या
var myListener = function(evt) {...(ईवेंट श्रोता को inputतत्व से हटाकर (उदाहरण के लिए removeEventListener) इस उत्तर में संबोधित नहीं किया गया है।)
डेमो विवरण:
नीचे दिए गए कोड स्निपेट में, फ़ंक्शन onRangeChangeसार्वभौमिक समाधान प्रदान करता है। बाकी कोड इसका उपयोग प्रदर्शित करने के लिए बस एक उदाहरण है। किसी भी चर के साथ शुरू होता my...है जो सार्वभौमिक समाधान के लिए अप्रासंगिक है और केवल डेमो के लिए मौजूद है।
डेमो रेंज / स्लाइडर मूल्य और साथ ही मानक "change", "input"और कस्टम "onRangeChange"ईवेंट (क्रमशः A, B और C) को निकाल दिया गया है। इस स्निपेट को विभिन्न ब्राउज़रों में चलाते समय, निम्न पर ध्यान दें, जब आप रेंज / स्लाइडर के साथ बातचीत करते हैं:
डेमो कोड:
// 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>क्रेडिट:
जबकि यहां कार्यान्वयन काफी हद तक मेरा अपना है, यह एमबीउरने के जवाब से प्रेरित था । उस दूसरे उत्तर ने सुझाव दिया कि "इनपुट" और "परिवर्तन" घटनाओं को मर्ज किया जा सकता है और इसके परिणामस्वरूप कोड डेस्कटॉप और मोबाइल ब्राउज़र दोनों में काम करेगा। हालाँकि, उस उत्तर की कोड में छिपी हुई "अतिरिक्त" घटनाओं को निकाल दिया जाता है, जो कि अपने आप में समस्याग्रस्त है, और गोलीबारी की गई घटनाएँ ब्राउज़र, एक और समस्या के बीच भिन्न होती हैं। यहां मेरा कार्यान्वयन उन समस्याओं को हल करता है।
कीवर्ड:
जावास्क्रिप्ट इनपुट टाइप रेंज स्लाइडर ईवेंट्स इनपुट ब्राउज़र कॉम्पेटिबिलिटी क्रॉस-ब्राउज़र डेस्कटॉप मोबाइल नं-jQuery
मैं इसे एक उत्तर के रूप में पोस्ट कर रहा हूं क्योंकि यह कम उपयोगी उत्तर के तहत एक टिप्पणी के बजाय इसका खुद का जवाब होने के योग्य है। मुझे यह विधि स्वीकृत उत्तर से बहुत बेहतर लगती है क्योंकि यह HTML से सभी js को एक अलग फाइल में रख सकता है।
जैमरेलियन द्वारा प्रदान किए गए उत्तर को स्वीकृत उत्तर के तहत उनकी टिप्पणी में दिया गया है।
$("#myelement").on("input change", function() {
//do something
});
हालांकि Jaime द्वारा इस टिप्पणी के बारे में पता होना चाहिए
बस ध्यान दें कि इस समाधान के साथ, क्रोम में आपको हैंडलर (एक घटना) के लिए दो कॉल मिलेंगे, इसलिए यदि आप इसकी परवाह करते हैं, तो आपको इसके खिलाफ चौकसी करने की आवश्यकता है।
जैसे कि यह उस घटना को आग देगा जब आपने माउस को स्थानांतरित करना बंद कर दिया है, और फिर जब आप माउस बटन को छोड़ते हैं।
के संबंध में changeघटना और inputघटना ट्रिगर करने के लिए कार्यक्षमता दो बार के कारण, यह बहुत ज्यादा एक गैर मुद्दा है।
यदि आपके पास फंक्शन फायरिंग बंद है input, तो इस बात की संभावना नहीं है कि changeइवेंट में आग लगने पर कोई समस्या होगी ।
inputजब आप किसी श्रेणी इनपुट स्लाइडर को खींचते हैं तो तेजी से आग लग जाती है। अंत में एक और फंक्शन कॉल फायरिंग के बारे में चिंता करना, पानी के समुद्र की तुलना में पानी की एक बूंद के बारे में चिंता करने की तरह है जो कि inputघटना है।
यहां तक कि changeघटना को बिल्कुल भी शामिल करने का कारण ब्राउज़र संगतता के लिए है (मुख्यतः IE के साथ)।
अद्यतन: मैं इस जवाब को डेस्कटॉप पर रेंज / स्लाइडर इंटरैक्शन का उपयोग करने के लिए माउस घटनाओं का उपयोग करने के तरीके के रूप में यहां छोड़ रहा हूं (लेकिन मोबाइल नहीं) ब्राउज़र। हालाँकि, मैंने अब एक पूरी तरह से अलग लिखा है और, मेरा मानना है कि इस पृष्ठ पर कहीं और बेहतर उत्तर है जो इस समस्या के लिए एक क्रॉस-ब्राउज़र डेस्कटॉप और मोबाइल समाधान प्रदान करने के लिए एक अलग दृष्टिकोण का उपयोग करता है।
मूल उत्तर:
सारांश: एक क्रॉस-ब्राउज़र, सादा जावास्क्रिप्ट (अर्थात- jQuery) समाधान का उपयोग किए बिना रेंज इनपुट मूल्यों को पढ़ने की अनुमति देने के लिए on('input'...और / या on('change'...जो ब्राउज़रों के बीच असंगत रूप से काम करते हैं।
आज (देर से फ़रवरी, 2016) के अनुसार, अभी भी ब्राउज़र असंगतता है, इसलिए मैं यहां एक नया काम प्रदान कर रहा हूं।
समस्या: रेंज इनपुट का उपयोग करते समय, यानी एक स्लाइडर, on('input'...मैक और विंडोज फ़ायरफ़ॉक्स, क्रोम और ओपेरा के साथ-साथ मैक सफारी में निरंतर अद्यतन सीमा मान प्रदान करता है, जबकि on('change'...केवल माउस-अप पर रेंज मान की रिपोर्ट करता है। इसके विपरीत, इंटरनेट एक्सप्लोरर (v11) में, on('input'...बिल्कुल काम नहीं करता है, और on('change'...लगातार अपडेट किया जाता है।
मैं मूसडाउन, मूसमोव और (संभवतः) माउसअप घटनाओं का उपयोग करके वेनिला जावास्क्रिप्ट (यानी कोई jQuery) का उपयोग करके सभी ब्राउज़रों में समान निरंतर रेंज मूल्य रिपोर्टिंग प्राप्त करने के लिए यहां 2 रणनीतियों की रिपोर्ट करता हूं।
रणनीति 1: कम लेकिन कम कुशल
यदि आप अधिक कुशल कोड से कम कोड पसंद करते हैं, तो आप इस 1 समाधान का उपयोग कर सकते हैं जो माउज़डाउन और मूसमोव का उपयोग करता है, लेकिन माउसअप नहीं। यह स्लाइडर को आवश्यकतानुसार पढ़ता है, लेकिन किसी भी माउस-ओवर ईवेंट के दौरान अनावश्यक रूप से फायरिंग जारी रखता है, तब भी जब उपयोगकर्ता ने क्लिक नहीं किया है और इस तरह स्लाइडर को खींच नहीं रहा है। यह अनिवार्य रूप से 'मूसडाउन' के बाद और 'मूसमव' घटनाओं के दौरान, प्रत्येक का उपयोग करने में थोड़ा विलंब करने के बाद सीमा मूल्य को पढ़ता है requestAnimationFrame।
var rng = document.querySelector("input");
read("mousedown");
read("mousemove");
read("keydown"); // include this to also allow keyboard control
function read(evtType) {
rng.addEventListener(evtType, function() {
window.requestAnimationFrame(function () {
document.querySelector("div").innerHTML = rng.value;
rng.setAttribute("aria-valuenow", rng.value); // include for accessibility
});
});
}<div>50</div><input type="range"/>रणनीति 2: लंबी लेकिन अधिक कुशल
यदि आपको अधिक कुशल कोड की आवश्यकता है और अधिक लंबाई कोड को सहन कर सकते हैं, तो आप निम्न समाधान का उपयोग कर सकते हैं जो मूसडाउन, मूसमोव और माउसअप का उपयोग करता है। यह स्लाइडर को आवश्यकतानुसार पढ़ता है, लेकिन माउस बटन जारी होते ही उचित रूप से इसे पढ़ना बंद कर देता है। आवश्यक अंतर यह है कि केवल own मूसडाउन ’के बाद ove मूसमोव’ के लिए सुनना शुरू होता है, और यह up माउसअप ’के बाद after मूसमव’ के लिए सुनना बंद कर देता है।
var rng = document.querySelector("input");
var listener = function() {
window.requestAnimationFrame(function() {
document.querySelector("div").innerHTML = rng.value;
});
};
rng.addEventListener("mousedown", function() {
listener();
rng.addEventListener("mousemove", listener);
});
rng.addEventListener("mouseup", function() {
rng.removeEventListener("mousemove", listener);
});
// include the following line to maintain accessibility
// by allowing the listener to also be fired for
// appropriate keyboard events
rng.addEventListener("keydown", listener);<div>50</div><input type="range"/>डेमो: उपर्युक्त कार्य-परिवेशों की आवश्यकता और क्रियान्वयन की पूर्ण व्याख्या
निम्नलिखित कोड अधिक पूरी तरह से इस रणनीति के कई पहलुओं को प्रदर्शित करता है। स्पष्टीकरण प्रदर्शन में अंतर्निहित हैं:
touchmoveपर्याप्त होना चाहिए, और मुझे लगता है कि mousemoveइस मामले में इसका इलाज किया जा सकता है ।
एंड्रयू विलेम के समाधान मोबाइल डिवाइस संगत नहीं हैं।
यहां उनके दूसरे समाधान का एक संशोधन है जो एज, IE, ओपेरा, FF, क्रोम, iOS सफारी और मोबाइल समकक्ष (जो मैं परीक्षण कर सकता था) में काम करता है:
अद्यतन 1: हटा दिया गया "अनुरोधअन्यायकरण नाम" भाग, क्योंकि मैं मानता हूं कि यह आवश्यक नहीं है:
var listener = function() {
// do whatever
};
slider1.addEventListener("input", function() {
listener();
slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
listener();
slider1.removeEventListener("input", listener);
}); अद्यतन २: एंड्रयू के २ जून २०१६ का जवाब अद्यतन उत्तर:
धन्यवाद, एंड्रयू - जो मुझे मिल सकता है हर ब्राउज़र में काम करने के लिए प्रकट होता है (जीत डेस्कटॉप: आईई, क्रोम, ओपेरा, एफएफ; एंड्रॉइड क्रोम, ओपेरा और एफएफ, आईओएस सफारी)।
अद्यतन 3: यदि ("स्लाइडर में oninput) समाधान।"
उपरोक्त सभी ब्राउज़रों में काम करने के लिए निम्न प्रकट होता है। (मुझे अब मूल स्रोत नहीं मिल रहा है।) मैं इसका उपयोग कर रहा था, लेकिन यह बाद में IE पर विफल हो गया और इसलिए मैं एक अलग की तलाश में चला गया, इसलिए मैं यहां समाप्त हुआ।
if ("oninput" in slider1) {
slider1.addEventListener("input", function () {
// do whatever;
}, false);
}लेकिन इससे पहले कि मैं आपके समाधान की जाँच करता, मैंने देखा कि यह IE में फिर से काम कर रहा था - शायद कुछ और संघर्ष था।
एक अच्छे क्रॉस-ब्राउज़र व्यवहार और समझने योग्य कोड के लिए, फॉर्म के संयोजन में ऑन्चेंज विशेषता का उपयोग करना सबसे अच्छा है:
function showVal(){
valBox.innerHTML = inVal.value;
}<form onchange="showVal()">
<input type="range" min="5" max="10" step="1" id="inVal">
</form>
<span id="valBox">
</span>एक ही oninput का उपयोग करके , मान को सीधे बदल दिया जाता है।
function showVal(){
valBox.innerHTML = inVal.value;
}<form oninput="showVal()">
<input type="range" min="5" max="10" step="1" id="inVal">
</form>
<span id="valBox">
</span>अभी तक एक और दृष्टिकोण - बस एक तत्व पर एक झंडा लगाते हैं जो संकेत देता है कि किस प्रकार की घटना को संभाला जाना चाहिए:
function setRangeValueChangeHandler(rangeElement, handler) {
rangeElement.oninput = (event) => {
handler(event);
// Save flag that we are using onInput in current browser
event.target.onInputHasBeenCalled = true;
};
rangeElement.onchange = (event) => {
// Call only if we are not using onInput in current browser
if (!event.target.onInputHasBeenCalled) {
handler(event);
}
};
}आप लगातार आग लगाने के लिए जावास्क्रिप्ट "ondrag" घटना का उपयोग कर सकते हैं। यह निम्नलिखित कारणों से "इनपुट" से बेहतर है:
ब्राउज़र का समर्थन।
"Ondrag" और "परिवर्तन" घटना के बीच अंतर कर सकता है। "इनपुट" ड्रैग और चेंज दोनों के लिए फायर करता है।
JQuery में:
$('#sample').on('drag',function(e){
});
onchangeआग नहीं करता है। यह समस्या का निवारण करने में था कि मुझे यह प्रश्न मिला।