Pertanyaan Apakah ada cara untuk menghentikan input manual dalam type = number tetapi masih memungkinkan perubahan dengan tombol “naik / turun”?


Saya punya masukan:

<input type="number" name="amount" min="4" max="6" step="2" value="4" id="amount" />

Dan saya tidak memiliki tombol submit normal untuk mengirimkan info (menggunakan javascript).

type = number berfungsi dengan baik, tetapi pengguna masih dapat mengetikkan nomor apa pun yang mereka inginkan, saya ingin menghentikan pengguna untuk dapat mengetikkan input, tetapi masih memungkinkan untuk perubahan menggunakan panah "atas / bawah" yang muncul dengan type = jumlah. Saya telah mencoba meneliti tetapi tidak dapat menemukan apa pun. Apakah ini mungkin?


4
2017-08-17 16:25


asal


Jawaban:


Apakah ada alasan Anda menghindari menggunakan drop down select menandai? Ini akan memberi pengguna pilihan nomor yang sangat terbatas (ditetapkan sesuai keinginan Anda). Anda bahkan bisa mengisi <option> kolom dengan angka 1 hingga 100 (atau apa pun yang Anda pilih) menggunakan PHP atau JavaScript sehingga Anda tidak perlu secara manual mengetikkan setiap angka dalam kode HTML.

<select>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

3
2017-08-17 16:31



Pengguna adalah diharapkan untuk dapat mengetik di lapangan, sebagai satu opsi. Meskipun mungkin untuk mencegah ini sebagian (yaitu ketika JavaScript diaktifkan dan pengendali event dalam kode Anda menutupi cara-cara yang mungkin digunakan pengguna), tidak ada gunanya menggunakan elemen ketika Anda secara khusus tidak ingin mendapatkan fungsi dasarnya .

Jika Anda hanya ingin mengizinkan dua nilai 4 dan 6, seperti yang terlihat dari contoh Anda, dan Anda ingin mencegah pengguna dari hanya mengetik salah satu dari mereka, maka Anda harus menggunakan select elemen atau satu set dua tombol radio.


1
2017-08-17 16:38



Diedit untuk memblokir copy / paste:

<script type="text/javascript">
document.getElementById('amount').onkeypress = function(e) { e.preventDefault(); };

document.getElementById('amount').onkeydown = function(e) {
    if(e.keyCode != 38 && e.keyCode != 40)
        e.preventDefault();
};

if(document.addEventListener)
    document.getElementById('amount').addEventListener('contextmenu',function(e) { e.preventDefault();
},false);
</script>

http://jsfiddle.net/Wh5Ms/2/

Kemudian Anda bisa menambahkan <noscript> tag untuk pengguna dengan JavaScript dimatikan dan menunjukkan kepada mereka <select> elemen, dll.


1
2017-08-17 16:32



Meskipun saya tidak yakin apa yang dilakukan atribut langkah tetapi cukup yakin bahwa Anda dapat menemukan cara untuk menggunakannya sesuai kebutuhan Anda dalam kode di bawah ini

Kode di bawah ini memastikan bahwa nilai yang diizinkan adalah antara min dan atribut maks yang ditentukan saja Kode ini menggunakan jquery 1.10 dan seterusnya.

var prevVal = 0;
$("input[type=number]").on("keydown", function(e){
    prevVal = Number($(this).val());
});
$("input[type=number]").on("keyup", function(e){
   var minVal = $(this).attr("min");
    var maxVal = $(this).attr("max");
    var step= $(this).attr("step");
    var currentVal = $(this).val();
    if(!(currentVal<=maxVal&&currentVal>=minVal)){
        $(this).val(prevVal)
    }

});

0
2017-08-17 16:45