আমি যখন <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ইভেন্টটি ব্যবহার করা উচিত যা ফায়ারফক্স, সাফারি এবং ক্রোমে উভয়ই মাউস এবং কীবোর্ড থেকে সরাসরি আপডেটগুলি গ্রহণ করবে।
যাইহোক, oninputআইই 10 তে সমর্থিত নয়, সুতরাং আপনার ইভেন্টের সেরা হ'ল দুটি ইভেন্ট হ্যান্ডলারকে একত্রিত করা এটি:
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1"
oninput="showVal(this.value)" onchange="showVal(this.value)">আরও তথ্যের জন্য এই বাগজিলা থ্রেডটি দেখুন।
$("#myelement").on("input change", function() { doSomething(); });jQuery সহ।
onchange()মোবাইল ওয়েবে Android Chromeএবং এর মতো কাজ করে না iOS Safari। কোন বিকল্প পরামর্শ?
সারসংক্ষেপ:
আমি এখানে একটি নো-জিকিউয়ারি ক্রস-ব্রাউজার ডেস্কটপ এবং মোবাইলের সীমাবদ্ধতা / স্লাইডার ইন্টারঅ্যাকশনগুলিতে ধারাবাহিকভাবে প্রতিক্রিয়া জানাতে সক্ষম করি যা বর্তমান ব্রাউজারগুলিতে সম্ভব নয়। এটি মূলত সমস্ত ব্রাউজারগুলিকে on("change"...তাদের on("change"...বা on("input"...ইভেন্টগুলির জন্য আই 11 এর ইভেন্ট অনুকরণ করতে বাধ্য করে । নতুন ফাংশনটি হ'ল ...
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আপনার শ্রোতা। শ্রোতাদের যে কোনও মিথস্ক্রিয়া বা পরিসীমা / স্লাইডারের মান পরিবর্তনের সাথে যোগাযোগ করা হবে তবে সেই মান পরিবর্তন করে না এমন কথোপকথনের পরে নয়, বর্তমান স্লাইডারের অবস্থানে প্রাথমিক মাউস বা স্পর্শ ইন্টারঅ্যাকশন সহ বা স্লাইডারের উভয় প্রান্তে সরে যাওয়ার পরে।
সমস্যা:
জুন ২০১ early এর শুরুর দিকে, বিভিন্ন ব্রাউজারগুলি পরিসীমা / স্লাইডার ব্যবহারে কীভাবে প্রতিক্রিয়া জানায় সে অনুসারে তারতম্য। পাঁচটি পরিস্থিতি প্রাসঙ্গিক:
উপরের টেবিলটি দেখায় যে উপরোক্ত পরিস্থিতিগুলির মধ্যে তারা কীভাবে প্রতিক্রিয়া জানায়, কমপক্ষে তিনটি পৃথক ডেস্কটপ ব্রাউজার তাদের আচরণে কীভাবে আলাদা হয়:
সমাধান:
onRangeChangeফাংশন পরিসীমা / স্লাইডার পারস্পরিক ক্রিয়ার জন্য একটি সামঞ্জস্যপূর্ণ এবং আন্দাজের ক্রস ব্রাউজার প্রতিক্রিয়া প্রদান করে। এটি সমস্ত ব্রাউজারগুলিকে নিম্নলিখিত টেবিল অনুযায়ী আচরণ করতে বাধ্য করে:
আইই ১১ এ, কোডটি মূলত স্থিতাবস্থা অনুসারে সমস্ত কিছু পরিচালনা করার অনুমতি দেয়, অর্থাত্ এটি "change"ইভেন্টটিকে তার আদর্শ পদ্ধতিতে কাজ করতে দেয় এবং ইভেন্টটি "input"অপ্রাসঙ্গিক কারণ এটি কোনওভাবেই আগুনে ছোঁড়া হয় না। অন্যান্য ব্রাউজারগুলিতে, "change"ইভেন্টটি কার্যকরভাবে নিঃশব্দ করা হয় (অতিরিক্ত এবং কখনও কখনও সহজেই দৃশ্যমান হওয়াগুলিকে গুলি চালানো থেকে রোধ করতে)। "input"তদ্ব্যতীত , ইভেন্টটি তার শ্রোতাদের তখনই সরিয়ে দেয় যখন সীমা / স্লাইডারের মান পরিবর্তন হয়। কিছু ব্রাউজারের জন্য (যেমন ফায়ারফক্স) এটি ঘটে কারণ শ্রোতারা উপরের তালিকা থেকে 1, 4 এবং 5 এর পরিস্থিতিতে দৃ effectively়তার সাথে চুপ করে গেছেন।
(যদি আপনার শ্রোতা যদি সত্যই 1, 4 এবং / অথবা 5 দৃশ্যে সক্রিয় হওয়ার প্রয়োজন হয় তবে আপনি "mousedown"/ "touchstart", "mousemove"/ "touchmove"এবং / অথবা "mouseup"/ "touchend"ইভেন্টগুলি অন্তর্ভুক্ত করার চেষ্টা করতে পারেন Such এই জাতীয় সমাধানটি এই উত্তরের বাইরে নয়))
মোবাইল ব্রাউজারগুলিতে কার্যকারিতা:
আমি এই কোডটি ডেস্কটপ ব্রাউজারগুলিতে পরীক্ষা করেছি তবে কোনও মোবাইল ব্রাউজারে নয়। তবে এই পৃষ্ঠার অন্য উত্তরে এমবউর্ন দেখিয়েছে যে এখানে আমার সমাধান "... আমি যে প্রতিটি ব্রাউজারে খুঁজে পেতে পারি তাতে এটি উপস্থিত রয়েছে (উইন ডেস্কটপ: আই, ক্রোম, অপেরা, এফএফ; অ্যান্ড্রয়েড ক্রোম, অপেরা এবং এফএফ, আইওএস সাফারি) " । (ধন্যবাদ এমবিউর্ন।)
ব্যবহার:
এই সমাধানটি ব্যবহার করতে, 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>ক্রেডিট:
যদিও এখানে বাস্তবায়নটি মূলত আমার নিজের, এটি এমবিউরনের উত্তরে অনুপ্রাণিত হয়েছিল । এই অন্যান্য উত্তরে পরামর্শ দেওয়া হয়েছিল যে "ইনপুট" এবং "পরিবর্তন" ইভেন্টগুলি একত্রিত করা যেতে পারে এবং ফলাফল কোডটি ডেস্কটপ এবং মোবাইল ব্রাউজার উভয় ক্ষেত্রেই কাজ করবে। যাইহোক, এই উত্তরের কোডটি গোপন "অতিরিক্ত" ইভেন্টগুলিকে বহিষ্কার করার ফলাফল দেয় যা নিজে এবং নিজেই সমস্যাযুক্ত এবং ঘটনাগুলি ব্রাউজারগুলির মধ্যে পৃথক হয়, আরও একটি সমস্যা। আমার বাস্তবায়ন এখানে এই সমস্যাগুলি সমাধান করে।
মূলশব্দ:
জাভাস্ক্রিপ্ট ইনপুট টাইপ পরিসীমা স্লাইডার ইভেন্টগুলি ইনপুট ব্রাউজারের সামঞ্জস্যতা ক্রস-ব্রাউজার ডেস্কটপ মোবাইল নো-জিকুয়েরি পরিবর্তন করে
আমি এটি একটি উত্তর হিসাবে পোস্ট করছি কারণ এটি কম দরকারী উত্তরের অধীনে মন্তব্য করার চেয়ে এটি নিজের উত্তর হওয়ার দাবিদার। আমি এই পদ্ধতিটি গ্রহণযোগ্য উত্তরের চেয়ে অনেক বেশি ভাল পাই কারণ এটি সমস্ত জেএসকে এইচটিএমএল থেকে পৃথক ফাইলে রাখতে পারে।
জামারেলিয়ান তার দেওয়া মন্তব্যে গৃহীত উত্তরের অধীনে দেওয়া উত্তর।
$("#myelement").on("input change", function() {
//do something
});যদিও জাইমের এই মন্তব্যটি সম্পর্কে সচেতন হন
কেবল দ্রষ্টব্য যে এই সমাধানের সাথে ক্রোমে আপনি হ্যান্ডলারের কাছে দুটি কল পাবেন (প্রতিটি ইভেন্টে একটি), সুতরাং যদি আপনি এটির যত্ন নেন তবে আপনাকে অবশ্যই এ থেকে রক্ষা করা উচিত।
এটি যেমন ঘটবে তখন আপনি মাউসটি সরানো বন্ধ করে দিয়েছিলেন এবং তারপরে আবার যখন আপনি মাউস বোতামটি ছেড়ে দেবেন।
সম্পর্ক changeইভেন্ট এবং inputঘটনা ট্রিগার কার্যকারিতা দুইবার ঘটাচ্ছে, এই প্রায় কাছাকাছি একটি অ-বিষয়।
আপনার যদি কোনও ফাংশন চালু inputথাকে তবে changeইভেন্টটি চালিত হওয়ার পরে কোনও সমস্যা হওয়ার সম্ভাবনা খুব কম ।
inputআপনি যখন একটি রেঞ্জ ইনপুট স্লাইডার টেনে আনেন তখন দ্রুত আগুন ছড়িয়ে পড়ে। শেষে আরও একটি ফাংশন কল ফায়ারিংয়ের বিষয়ে উদ্বেগ প্রকাশ করা সমুদ্রের তুলনায় পানির এক ফোঁটা সম্পর্কে উদ্বেগ হওয়ার মতো inputঘটনা is
এমনকি changeইভেন্টটি মোটেও অন্তর্ভুক্ত করার কারণটি ব্রাউজারের সামঞ্জস্যতার জন্য (মূলত আইই সহ)।
আপডেট: আমি ডেস্কটপগুলিতে (তবে মোবাইল নয়) ব্রাউজারগুলিতে পরিসীমা / স্লাইডার ইন্টারঅ্যাকশনগুলি কীভাবে মাউস ইভেন্টগুলি ব্যবহার করতে পারি তার উদাহরণ হিসাবে আমি এই উত্তরটি এখানে রেখে যাচ্ছি। যাইহোক, আমি এখন সম্পূর্ণ ভিন্ন লিখেছি এবং আমি বিশ্বাস করি, এই পৃষ্ঠায় অন্য যে কোনও জায়গায় উত্তর দেওয়া হয়েছে যা ক্রস ব্রাউজারের ডেস্কটপ- এবং এই সমস্যার সমাধানের জন্য মোবাইল সমাধান সরবরাহ করতে একটি ভিন্ন পদ্ধতির ব্যবহার করে ।
আসল উত্তর:
সংক্ষিপ্তসার: একটি ক্রস ব্রাউজার, প্লেইন জাভাস্ক্রিপ্ট (অর্থাত্ নো-জিক্যুয়ারি) সমাধানটি ব্যবহার না করে on('input'...এবং / অথবা on('change'...যা ব্রাউজারগুলির মধ্যে অসামঞ্জস্যপূর্ণভাবে কাজ করে সেগুলি পড়ার অনুমতি দেয় ।
আজকের হিসাবে (ফেব্রুয়ারির শেষ দিকে, ২০১ 2016) এখনও ব্রাউজারের অসঙ্গতি রয়েছে তাই আমি এখানে একটি নতুন কাজ সরবরাহ করছি।
সমস্যা: একটি পরিসীমা ইনপুট, অর্থাত্ একটি স্লাইডার ব্যবহার করার সময়, on('input'...ম্যাক এবং উইন্ডোজ ফায়ারফক্স, ক্রোম এবং অপেরা পাশাপাশি ম্যাক সাফারিতে ধারাবাহিকভাবে আপডেট হওয়া পরিসীমা মান সরবরাহ করে, যখন on('change'...কেবলমাত্র মাউস-আপের উপরের রেঞ্জের মানটি রিপোর্ট করে। বিপরীতে, ইন্টারনেট এক্সপ্লোরার (v11) on('input'...এ মোটেই কাজ করে না এবং on('change'...ক্রমাগত আপডেট হয়।
আমি মোসাউনডাউন, মাউসমোভ এবং (সম্ভবত) মাউসআপ ইভেন্টগুলি ব্যবহার করে ভ্যানিলা জাভাস্ক্রিপ্ট (অর্থাত্ কোনও জিক্যুরি নয়) ব্যবহার করে সমস্ত ব্রাউজারগুলিতে অবিচ্ছিন্ন ধারাবাহিক পরিসীমা মান প্রতিবেদন করার জন্য 2 কৌশল এখানে প্রতিবেদন করি।
কৌশল 1: খাটো কিন্তু কম দক্ষ
আপনি যদি আরও দক্ষ কোডের চেয়ে খাটো কোড পছন্দ করেন তবে আপনি এই 1 ম সমাধানটি মাউসডাউন এবং মাউসআপ ব্যবহার করতে পারেন তবে মাউসআপ ব্যবহার করতে পারেন not এটি স্লাইডারটি প্রয়োজনীয় হিসাবে পড়তে পারে তবে কোনও মাউস-ওভার ইভেন্টের সময় অপ্রয়োজনীয়ভাবে গুলি চালিয়ে যেতে পারে, এমনকি ব্যবহারকারী ক্লিক না করে এবং এইভাবে স্লাইডারটিকে টেনে না আনছে। এটি 'মোডাউনডাউন' এর পরে এবং 'মাউসমাভ' ইভেন্টের সময় প্রতিটি ব্যবহারে কিছুটা বিলম্ব করে, মূলত পরিসীমা মানটি পড়ে 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: দীর্ঘ কিন্তু আরও দক্ষ
আপনার যদি আরও দক্ষ কোড প্রয়োজন এবং লম্বা কোড দৈর্ঘ্য সহ্য করতে পারেন তবে আপনি নিম্নলিখিত সমাধানটি ব্যবহার করতে পারেন যা মোডাউনড, মাউসমাভ এবং মাউসআপ ব্যবহার করে। এটি প্রয়োজন মতো স্লাইডারটিও পড়ে, তবে মাউস বোতামটি প্রকাশের সাথে সাথে এটি পড়া বন্ধ করে দেওয়া উচিত। প্রয়োজনীয় পার্থক্যটি হ'ল কেবল 'মোসডাউন'-এর পরে' মাউসমোভ 'শোনা শুরু করে এবং এটি' মাউসআপ 'এর পরে' মাউসমোভ 'শোনা বন্ধ করে দেয়।
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ক্ষেত্রেও এটির মতো আচরণ করা যেতে পারে ।
অ্যান্ড্রু উইলেমের সমাধানগুলি মোবাইল ডিভাইসের সাথে সামঞ্জস্যপূর্ণ নয়।
এখানে তার দ্বিতীয় সমাধানটির একটি পরিবর্তন রয়েছে যা এজ, আইই, অপেরা, এফএফ, ক্রোম, আইওএস সাফারি এবং মোবাইল সমতুল্য (যে আমি পরীক্ষা করতে পারি) তে কাজ করে:
আপডেট 1: "অনুরোধআনিমেশন ফ্রেম" অংশ সরানো হয়েছে, আমি সম্মত হওয়ায় এটি প্রয়োজনীয় নয়:
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: যদি ("স্লাইডারে অনিনপুট) সমাধান
নিম্নলিখিত উপরোক্ত সমস্ত ব্রাউজার জুড়ে কাজ করতে দেখা যাচ্ছে। (আমি এখন আসল উত্সটি খুঁজে পাচ্ছি না)) আমি এটি ব্যবহার করছিলাম, তবে এটি পরে আইয়েতে ব্যর্থ হয়েছিল এবং তাই আমি অন্য কোনও সন্ধান করতে চলেছি, তাই এখানেই শেষ করেছি ended
if ("oninput" in slider1) {
slider1.addEventListener("input", function () {
// do whatever;
}, false);
}তবে আমি আপনার সমাধানটি যাচাই করার আগে, আমি লক্ষ্য করেছি যে এটি আবার আইইতে কাজ করছে - সম্ভবত অন্য কোনও বিরোধ ছিল।
একটি ভাল ক্রস-ব্রাউজার আচরণ, এবং বোধগম্য কোডের জন্য, কোনও ফর্মের সংমিশ্রণে অন্বেষণ বৈশিষ্ট্যটি ব্যবহার করা ভাল:
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>একইভাবে অনিনপুট ব্যবহার করে মানটি সরাসরি পরিবর্তিত হয়।
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);
}
};
}আপনি অবিচ্ছিন্নভাবে গুলি চালানোর জন্য জাভাস্ক্রিপ্ট "অনড্র্যাগ" ইভেন্টটি ব্যবহার করতে পারেন। নিম্নলিখিত কারণগুলির কারণে এটি "ইনপুট" এর চেয়ে ভাল:
ব্রাউজার সমর্থন।
"অনড্র্যাগ" এবং "পরিবর্তন" ইভেন্টের মধ্যে পার্থক্য করতে পারে। "ইনপুট" উভয়ই টেনে আনুন এবং পরিবর্তন করুন।
JQuery এ:
$('#sample').on('drag',function(e){
});তথ্যসূত্র: http://www.w3schools.com/TAgs/ev_ondrag.asp
onchangeআগুন না। সমস্যাটি সমাধান করার সময় আমি এই প্রশ্নটি পেয়েছি।