Khi tôi chơi với <input type="range">, Firefox chỉ kích hoạt một sự kiện onchange nếu chúng ta thả thanh trượt xuống một vị trí mới trong đó Chrome và các thứ khác kích hoạt các sự kiện onchange trong khi thanh trượt được kéo.
Làm thế nào tôi có thể làm cho nó xảy ra khi kéo trong Firefox?
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)">Câu trả lời:
Rõ ràng Chrome và Safari đã sai: onchangechỉ nên được kích hoạt khi người dùng nhả chuột. Để nhận được các bản cập nhật liên tục, bạn nên sử dụng oninputsự kiện này, nó sẽ ghi lại các bản cập nhật trực tiếp trong Firefox, Safari và Chrome, cả từ chuột và bàn phím.
Tuy nhiên, oninputkhông được hỗ trợ trong IE10, vì vậy cách tốt nhất của bạn là kết hợp hai trình xử lý sự kiện, như sau:
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1"
oninput="showVal(this.value)" onchange="showVal(this.value)">
Kiểm tra chủ đề Bugzilla này để biết thêm thông tin.
$("#myelement").on("input change", function() { doSomething(); });với jQuery.
onchange()không hoạt động trên web di động như Android Chromevà iOS Safari. Bất kỳ đề nghị thay thế?
TÓM LƯỢC:
Tôi cung cấp ở đây một khả năng máy tính để bàn và thiết bị di động đa trình duyệt jQuery để đáp ứng nhất quán các tương tác phạm vi / thanh trượt, một điều không thể có trong các trình duyệt hiện tại. Về cơ bản, nó buộc tất cả các trình duyệt mô phỏng on("change"...sự kiện của IE11 cho sự kiện on("change"...hoặc on("input"...sự kiện của họ . Chức năng mới là ...
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);});
}
... đâu rlà yếu tố đầu vào phạm vi của bạn và flà người nghe của bạn. Người nghe sẽ được gọi sau bất kỳ tương tác nào thay đổi giá trị phạm vi / thanh trượt nhưng không phải sau các tương tác không thay đổi giá trị đó, bao gồm tương tác chuột hoặc chạm ban đầu ở vị trí thanh trượt hiện tại hoặc khi di chuyển khỏi đầu thanh trượt.
Vấn đề:
Kể từ đầu tháng 6 năm 2016, các trình duyệt khác nhau khác nhau về cách chúng phản ứng với việc sử dụng phạm vi / thanh trượt. Năm kịch bản có liên quan:
Bảng sau đây cho thấy ít nhất ba trình duyệt máy tính để bàn khác nhau về hành vi của chúng đối với kịch bản nào ở trên mà chúng phản ứng:
Giải pháp:
Các onRangeChangechức năng cung cấp một câu trả lời qua trình duyệt nhất quán và có thể dự đoán tương tác nhiều / trượt. Nó buộc tất cả các trình duyệt hoạt động theo bảng sau:
Trong IE11, mã về cơ bản cho phép mọi thứ hoạt động theo nguyên trạng, tức là nó cho phép "change"sự kiện hoạt động theo cách tiêu chuẩn của nó và "input"sự kiện này không liên quan vì dù sao nó cũng không bao giờ phát sinh. Trong các trình duyệt khác, "change"sự kiện này được tắt tiếng một cách hiệu quả (để ngăn chặn các sự kiện thêm và đôi khi không dễ thấy xảy ra khi bắn). Ngoài ra, "input"sự kiện chỉ kích hoạt trình nghe của nó khi giá trị của phạm vi / thanh trượt thay đổi. Đối với một số trình duyệt (ví dụ Firefox), điều này xảy ra do trình nghe bị tắt tiếng một cách hiệu quả trong các kịch bản 1, 4 và 5 từ danh sách trên.
(Nếu bạn thực sự yêu cầu người nghe được kích hoạt trong cả kịch bản 1, 4 và / hoặc 5, bạn có thể thử kết hợp "mousedown"/ "touchstart", "mousemove"/ "touchmove"và / hoặc "mouseup"/ "touchend"sự kiện. Giải pháp như vậy nằm ngoài phạm vi của câu trả lời này.)
Chức năng trong trình duyệt di động:
Tôi đã thử nghiệm mã này trong các trình duyệt máy tính để bàn nhưng không phải trong bất kỳ trình duyệt di động nào. Tuy nhiên, trong một câu trả lời khác trên trang này, MBourne đã chỉ ra rằng giải pháp của tôi ở đây "... dường như hoạt động trong mọi trình duyệt tôi có thể tìm thấy (Win desktop: IE, Chrome, Opera, FF; Android Chrome, Opera và FF, iOS Safari) " . (Cảm ơn MBourne.)
Sử dụng:
Để sử dụng giải pháp này, hãy bao gồm onRangeChangehàm từ tóm tắt ở trên (đơn giản hóa / rút gọn) hoặc đoạn mã trình diễn bên dưới (giống hệt về chức năng nhưng tự giải thích nhiều hơn) trong mã của riêng bạn. Gọi nó như sau:
onRangeChange(myRangeInputElmt, myListener);đâu myRangeInputElmtlà <input type="range">phần tử DOM mong muốn của bạn và myListenerlà hàm nghe / xử lý mà bạn muốn gọi "change"các sự kiện giống như.
Trình nghe của bạn có thể không tham số nếu muốn hoặc có thể sử dụng eventtham số, tức là một trong hai cách sau sẽ hoạt động, tùy thuộc vào nhu cầu của bạn:
var myListener = function() {...hoặc là
var myListener = function(evt) {...(Loại bỏ trình nghe sự kiện khỏi thành inputphần (ví dụ: sử dụng removeEventListener) không được đề cập trong câu trả lời này.)
Mô tả demo:
Trong đoạn mã dưới đây, hàm onRangeChangecung cấp giải pháp phổ quát. Phần còn lại của mã chỉ là một ví dụ để chứng minh việc sử dụng nó. Bất kỳ biến nào bắt đầu bằng my...không liên quan đến giải pháp phổ quát và chỉ hiện diện vì lợi ích của bản demo.
Các chương trình giới thiệu các giá trị phạm vi / trượt cũng như số lần tiêu chuẩn "change", "input"và tùy chỉnh "onRangeChange"sự kiện này đã bị sa thải (hàng A, B và C tương ứng). Khi chạy đoạn mã này trong các trình duyệt khác nhau, hãy lưu ý những điều sau khi bạn tương tác với phạm vi / thanh trượt:
Mã giới thiệu:
// 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>Tín dụng:
Mặc dù việc thực hiện ở đây phần lớn là của riêng tôi, nó được lấy cảm hứng từ câu trả lời của MBourne . Câu trả lời khác cho rằng các sự kiện "đầu vào" và "thay đổi" có thể được hợp nhất và mã kết quả sẽ hoạt động trong cả trình duyệt máy tính để bàn và thiết bị di động. Tuy nhiên, mã trong câu trả lời đó dẫn đến các sự kiện "phụ" bị ẩn được kích hoạt, trong đó bản thân nó có vấn đề và các sự kiện được bắn khác nhau giữa các trình duyệt, một vấn đề nữa. Việc thực hiện của tôi ở đây giải quyết những vấn đề đó.
Từ khóa:
Các sự kiện thanh trượt phạm vi loại đầu vào JavaScript thay đổi khả năng tương thích trình duyệt đầu vào trình duyệt chéo trên máy tính để bàn không có jQuery
Tôi đang đăng bài này như một câu trả lời vì nó xứng đáng là câu trả lời của riêng nó hơn là một bình luận dưới một câu trả lời ít hữu ích hơn. Tôi thấy phương pháp này tốt hơn nhiều so với câu trả lời được chấp nhận vì nó có thể giữ tất cả các js trong một tệp riêng biệt từ HTML.
Câu trả lời được cung cấp bởi Jamrelian trong bình luận của mình dưới câu trả lời được chấp nhận.
$("#myelement").on("input change", function() {
//do something
});
Chỉ cần lưu ý nhận xét này của Jaime
Chỉ cần lưu ý rằng với giải pháp này, trong chrome, bạn sẽ nhận được hai cuộc gọi đến trình xử lý (một cuộc gọi cho mỗi sự kiện), vì vậy nếu bạn quan tâm đến điều đó, thì bạn cần phải đề phòng nó.
Như trong nó sẽ kích hoạt sự kiện khi bạn đã ngừng di chuyển chuột, và sau đó một lần nữa khi bạn nhả nút chuột.
Liên quan đến changesự kiện và inputsự kiện khiến chức năng kích hoạt hai lần, đây không phải là vấn đề.
Nếu bạn có một chức năng kích hoạt input, rất khó có khả năng sẽ xảy ra sự cố khi changesự kiện này xảy ra.
inputkích hoạt nhanh khi bạn kéo một thanh trượt đầu vào phạm vi. Lo lắng về một chức năng nữa gọi bắn vào cuối giống như lo lắng về một giọt nước duy nhất so với đại dương nước là các inputsự kiện.
Lý do thậm chí bao gồm cả changesự kiện này là vì khả năng tương thích trình duyệt (chủ yếu là với IE).
CẬP NHẬT: Tôi để lại câu trả lời này ở đây như một ví dụ về cách sử dụng các sự kiện chuột để sử dụng các tương tác phạm vi / thanh trượt trong trình duyệt máy tính để bàn (nhưng không phải trên thiết bị di động). Tuy nhiên, bây giờ tôi cũng đã viết một cách hoàn toàn khác và, tôi tin rằng, câu trả lời tốt hơn ở nơi khác trên trang này sử dụng một cách tiếp cận khác để cung cấp giải pháp cho máy tính để bàn và thiết bị di động chéo cho vấn đề này.
Câu trả lời gốc:
Tóm tắt: Một giải pháp đa trình duyệt, JavaScript đơn giản (tức là không có jQuery) để cho phép đọc các giá trị đầu vào phạm vi mà không sử dụng on('input'...và / hoặc on('change'...hoạt động không nhất quán giữa các trình duyệt.
Cho đến ngày hôm nay (cuối tháng 2 năm 2016), vẫn còn sự không nhất quán của trình duyệt nên tôi sẽ cung cấp một công việc mới ở đây.
Vấn đề: Khi sử dụng đầu vào phạm vi, tức là thanh trượt, on('input'...cung cấp các giá trị phạm vi được cập nhật liên tục trong Mac và Windows Firefox, Chrome và Opera cũng như Mac Safari, trong khi on('change'...chỉ báo cáo giá trị phạm vi khi di chuột lên. Ngược lại, trong Internet Explorer (v11), on('input'...hoàn toàn không hoạt động và on('change'...được cập nhật liên tục.
Tôi báo cáo ở đây 2 chiến lược để nhận báo cáo giá trị phạm vi liên tục giống hệt nhau trong tất cả các trình duyệt sử dụng vanilla JavaScript (tức là không có jQuery) bằng cách sử dụng các sự kiện mousedown, mousemove và (có thể) mouseup.
Chiến lược 1: Ngắn hơn nhưng kém hiệu quả
Nếu bạn thích mã ngắn hơn mã hiệu quả hơn, bạn có thể sử dụng giải pháp thứ 1 này sử dụng mousedown và mousemove nhưng không phải mouseup. Thao tác này đọc thanh trượt khi cần, nhưng tiếp tục bắn một cách không cần thiết trong bất kỳ sự kiện di chuột nào, ngay cả khi người dùng chưa nhấp và do đó không kéo thanh trượt. Về cơ bản, nó đọc giá trị phạm vi cả sau 'mousedown' và trong các sự kiện 'mousemove', hơi chậm trễ mỗi lần sử dụng 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"/>Chiến lược 2: Dài hơn nhưng hiệu quả hơn
Nếu bạn cần mã hiệu quả hơn và có thể chịu đựng được độ dài mã dài hơn, thì bạn có thể sử dụng giải pháp sau đây sử dụng mousedown, mousemove và mouseup. Điều này cũng đọc thanh trượt khi cần thiết, nhưng thích hợp dừng đọc nó ngay khi nút chuột được phát hành. Sự khác biệt cơ bản là chỉ bắt đầu nghe 'mousemove' sau 'mousedown', và nó ngừng nghe 'mousemove' sau 'mouseup'.
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"/>Bản trình diễn: Giải thích đầy đủ hơn về nhu cầu và thực hiện các công việc trên
Các mã sau đây thể hiện đầy đủ hơn nhiều khía cạnh của chiến lược này. Giải thích được nhúng trong phần trình diễn:
touchmovenên là đủ, và tôi nghĩ nó có thể được đối xử giống như mousemovetrong trường hợp này.
Các giải pháp của Andrew Willem không tương thích với thiết bị di động.
Đây là bản sửa đổi của giải pháp thứ hai của anh ấy hoạt động trong Edge, IE, Opera, FF, Chrome, iOS Safari và tương đương với thiết bị di động (mà tôi có thể kiểm tra):
Cập nhật 1: Đã xóa phần "requestAnimationFrame", vì tôi đồng ý rằng không cần thiết:
var listener = function() {
// do whatever
};
slider1.addEventListener("input", function() {
listener();
slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
listener();
slider1.removeEventListener("input", listener);
}); Cập nhật 2: Trả lời câu trả lời cập nhật ngày 2 tháng 6 năm 2016 của Andrew:
Cảm ơn, Andrew - dường như hoạt động trong mọi trình duyệt tôi có thể tìm thấy (Win máy tính để bàn: IE, Chrome, Opera, FF; Android Chrome, Opera và FF, iOS Safari).
Cập nhật 3: giải pháp if ("oninput trong thanh trượt)
Dưới đây dường như hoạt động trên tất cả các trình duyệt trên. (Tôi không thể tìm thấy nguồn ban đầu ngay bây giờ.) Tôi đã sử dụng nó, nhưng sau đó nó đã thất bại trên IE và vì vậy tôi đã tìm kiếm một nguồn khác, do đó tôi đã kết thúc ở đây.
if ("oninput" in slider1) {
slider1.addEventListener("input", function () {
// do whatever;
}, false);
}Nhưng trước khi tôi kiểm tra giải pháp của bạn, tôi nhận thấy điều này đã hoạt động trở lại trong IE - có lẽ có một số xung đột khác.
Để có hành vi đa trình duyệt tốt và mã dễ hiểu, tốt nhất là sử dụng thuộc tính onchange kết hợp với một biểu mẫu:
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>Cùng sử dụng oninput , giá trị được thay đổi trực tiếp.
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>Một cách tiếp cận khác - chỉ cần đặt cờ trên một thành phần báo hiệu loại sự kiện nào sẽ được xử lý:
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);
}
};
}Bạn có thể sử dụng sự kiện "ondrag" JavaScript để bắn liên tục. Nó tốt hơn "đầu vào" vì những lý do sau:
Hỗ trợ trình duyệt.
Có thể phân biệt giữa sự kiện "ondrag" và "thay đổi". "đầu vào" kích hoạt cho cả kéo và thay đổi.
Trong jQuery:
$('#sample').on('drag',function(e){
});Tham khảo: http://www.w3schools.com/TAss/ev_ondrag.asp
onchangekhông bắn. Đó là trong việc khắc phục sự cố mà tôi tìm thấy câu hỏi này.