Nonaktifkan scrolling pada `<input type = number>`

Apakah mungkin untuk menonaktifkan roda gulir mengubah nomor di kolom nomor masukan? Saya telah mengotak-atik CSS khusus webkit untuk menghapus spinner, tetapi saya ingin menyingkirkan perilaku ini sama sekali. Saya suka menggunakan type=numberkarena menampilkan keyboard yang bagus di iOS.

Mencegah perilaku default peristiwa roda mouse pada elemen masukan nomor seperti yang disarankan oleh orang lain (memanggil "blur ()" biasanya bukan cara yang disukai untuk melakukannya, karena bukan itu yang diinginkan pengguna).

TAPI. Saya akan menghindari mendengarkan event roda mouse pada semua elemen input-number sepanjang waktu dan hanya melakukannya, ketika elemen berada dalam fokus (saat itulah masalahnya). Jika tidak , pengguna tidak dapat menggulir halaman saat penunjuk mouse berada di mana saja di atas elemen masukan nomor.

Solusi untuk jQuery:

// disable mousewheel on a input number field when in focus
// (to prevent Cromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

(Delegasikan acara fokus ke elemen formulir di sekitarnya - untuk menghindari banyak pemroses acara, yang berdampak buruk bagi kinerja.)

$(document).on("wheel", "input[type=number]", function (e) {
    $(this).blur();
});

Satu pendengar acara untuk mengatur semuanya

Hal ini mirip dengan @ Simon Perepelitsa 's jawaban di js murni, tetapi sedikit lebih sederhana, karena menempatkan salah satu pendengar acara pada elemen dokumen dan memeriksa apakah elemen terfokus adalah masukan nomor:

document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number"){
        document.activeElement.blur();
    }
});

Jika Anda ingin menonaktifkan perilaku pengguliran nilai di beberapa bidang, tetapi tidak yang lain, cukup lakukan ini:

document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number" &&
       document.activeElement.classList.contains("noscroll"))
    {
        document.activeElement.blur();
    }
});

dengan ini:

<input type="number" class="noscroll"/>

Jika sebuah input memiliki kelas noscroll, ia tidak akan berubah saat scroll, jika tidak semuanya tetap sama.

Uji di sini dengan JSFiddle

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })

http://jsfiddle.net/bQbDm/2/

Untuk contoh jQuery dan solusi lintas-browser, lihat pertanyaan terkait:

Pemroses peristiwa HTML5 untuk scroll input nomor - khusus Chrome

Anda cukup menggunakan atribut onwheel HTML .

Opsi ini tidak berpengaruh pada pengguliran elemen lain dari halaman.

Dan menambahkan pendengar agar semua masukan tidak berfungsi dalam masukan yang dibuat secara dinamis di posterior.

Selain itu, Anda dapat menghapus panah input dengan CSS.

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" onwheel="this.blur()" />

@Pramuka_semarang

Ada solusi yang lebih baik untuk ini. Blur menghilangkan fokus dari input dan itu adalah efek samping yang tidak Anda inginkan. Anda harus menggunakan evt.preventDefault sebagai gantinya. Ini mencegah perilaku default input saat pengguna menggulir. Ini kodenya:

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })

Pertama, Anda harus menghentikan acara roda mouse dengan:

1. Menonaktifkannya dengan mousewheel.disableScroll
2. Mencegat dengan e.preventDefault();
3. Dengan menghilangkan fokus dari elemen el.blur();

Dua pendekatan pertama menghentikan jendela dari bergulir dan yang terakhir menghapus fokus dari elemen; keduanya merupakan hasil yang tidak diinginkan.

Salah satu solusinya adalah dengan menggunakan el.blur()dan memfokuskan kembali elemen setelah penundaan:

$('input[type=number]').on('mousewheel', function(){
  var el = $(this);
  el.blur();
  setTimeout(function(){
    el.focus();
  }, 10);
});

Jawaban yang diberikan tidak berfungsi di Firefox (Quantum). Pemroses acara perlu diubah dari roda mouse ke roda:

$(':input[type=number]').on('wheel',function(e){ $(this).blur(); });

Kode ini berfungsi di Firefox Quantum dan Chrome.

Untuk siapa saja yang bekerja dengan React dan mencari solusi. Saya telah menemukan bahwa cara termudah adalah dengan menggunakan prop onWheelCapture dalam komponen Input seperti ini:

onWheelCapture={e => { e.target.blur() }}

Variasi Ketikan

Skrip ketikan perlu tahu bahwa Anda sedang mengerjakan HTMLElement untuk keamanan tipe, jika tidak, Anda akan melihat banyak Property 'type' does not exist on type 'Element'tipe kesalahan.

document.addEventListener("mousewheel", function(event){
  let numberInput = (<HTMLInputElement>document.activeElement);
  if (numberInput.type === "number") {
    numberInput.blur();
  }
});

Ketika mencoba menyelesaikan ini untuk diri saya sendiri, saya perhatikan bahwa sebenarnya mungkin untuk mempertahankan pengguliran halaman dan fokus input sambil menonaktifkan perubahan nomor dengan mencoba mengaktifkan kembali peristiwa yang tertangkap pada elemen induk dari yang <input type="number"/>mana itu ditangkap. , seperti ini:

e.target.parentElement.dispatchEvent(e);

Namun, ini menyebabkan kesalahan di konsol browser, dan mungkin tidak dijamin bekerja di mana-mana (saya hanya menguji di Firefox), karena ini adalah kode yang sengaja tidak valid.

Solusi lain yang berfungsi dengan baik setidaknya di Firefox dan Chromium adalah membuat <input>elemen sementara readOnly, seperti ini:

function handleScroll(e) {
  if (e.target.tagName.toLowerCase() === 'input'
    && (e.target.type === 'number')
    && (e.target === document.activeElement)
    && !e.target.readOnly
  ) {
      e.target.readOnly = true;
      setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
  }
}
document.addEventListener('wheel', function(e){ handleScroll(e); });

Satu efek samping yang saya perhatikan adalah hal itu dapat menyebabkan bidang berkedip selama sepersekian detik jika Anda memiliki gaya berbeda untuk readOnlybidang, tetapi setidaknya untuk kasus saya, ini tampaknya tidak menjadi masalah.

Demikian pula, (seperti yang dijelaskan dalam jawaban James) alih-alih memodifikasi readOnlyproperti, Anda dapat blur()bidang dan kemudian focus()mengembalikannya, tetapi sekali lagi, bergantung pada gaya yang digunakan, beberapa kedipan mungkin terjadi.

Atau, seperti yang disebutkan dalam komentar lain di sini, Anda dapat memanggil preventDefault()acara tersebut sebagai gantinya. Dengan asumsi bahwa Anda hanya menangani wheelkejadian pada masukan angka yang berada dalam fokus dan di bawah kursor mouse (itulah yang ditunjukkan oleh tiga kondisi di atas), dampak negatif pada pengalaman pengguna hampir tidak ada.

Jika Anda menginginkan solusi yang tidak memerlukan JavaScript, menggabungkan beberapa fungsionalitas HTML dengan pseudo-element CSS akan membantu:

span {
  position: relative;
  display: inline-block; /* Fit around contents */
}

span::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* Stretch over containing block */
  cursor: text; /* restore I-beam cursor */
}

/* Restore context menu while editing */
input:focus {
  position: relative;
  z-index: 1;
}

<label>How many javascripts can u fit in u mouth?
  <span><input type="number" min="0" max="99" value="1"></span>
</label>

Ini berfungsi karena mengklik konten <label>yang terkait dengan bidang formulir akan memfokuskan bidang tersebut. Namun, "kaca jendela" dari elemen semu di atas bidang akan memblokir peristiwa roda mouse agar tidak mencapainya.

Kekurangannya adalah tombol pemintal atas / bawah tidak lagi berfungsi, tetapi Anda mengatakan telah menghapusnya.

Secara teori, seseorang dapat memulihkan menu konteks tanpa memerlukan input untuk difokuskan terlebih dahulu: :hovergaya tidak boleh diaktifkan saat pengguna menggulir, karena browser menghindari penghitungan ulang selama pengguliran untuk alasan kinerja, tetapi saya belum sepenuhnya lintas-browser / perangkat mengujinya.

function fixNumericScrolling() {
$$( "input[type=number]" ).addEvent( "mousewheel", function(e) {
    stopAll(e);     
} );
}

function stopAll(e) {
if( typeof( e.preventDefault               ) != "undefined" ) e.preventDefault();
if( typeof( e.stopImmediatePropagation     ) != "undefined" ) e.stopImmediatePropagation();
if( typeof( event ) != "undefined" ) {
    if( typeof( event.preventDefault           ) != "undefined" ) event.preventDefault();
    if( typeof( event.stopImmediatePropagation ) != "undefined" ) event.stopImmediatePropagation();
}

return false;
}

Solusi termudah adalah menambahkan onWheel={ event => event.currentTarget.blur() }}input itu sendiri.