Anda mungkin berfikir bahawa membuat kotak spin yang konsisten, bersih dan profesional akan menjadi satu tugas yang mudah dalam HTML... Namun, kami berputus asa, tidak ada atribut standard untuk memberitahu input bahawa ia hanya perlu menerima nilai integer atau perpuluhan , semua penapisan input mestilah JS. Aduh!
Saya akan melaksanakan fungsi ini dengan Go, a-h/Templ, Tailwind dan Alpine.js kesayangan saya untuk memudahkan hidup.
Kami mulakan dengan menulis templat asas untuk kotak spin integer kami:
templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) { ... }
Kami mentakrifkan Interval seperti berikut:
type IntInterval struct { A, B int }
Dengan selang waktu, kami akan menetapkan min dan maks input. Semasa kami membuat kotak spin integer, langkah itu akan sentiasa ditetapkan kepada '1'.
templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) { <input type="number" placeholder="Enter Int…" step="1" if interval != nil { min={ strconv.Itoa(interval.A) } max={ strconv.Itoa(interval.B) } } ...> }
Sekarang mari kita mula menambah beberapa kelas dua, berikut adalah beberapa sifat khas dan elemen pseudo yang mengawal pemaparan input.
pilih-tiada [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]
Kelas tambahan berikut digunakan untuk mengalih keluar butang pemutar lalai:
[&::-butang-putaran-dalam-webkit]:[-penampilan-webkit:tiada] [&::-butang-putaran-luar-webkit]:[-penampilan-webkit:tiada] [-penampilan-moz: medan teks]
Akhir sekali, mari tambahkan beberapa padding asas, cincin, warna, dll...
blok w-bulat penuh-l-md py-2 px-2.5 text-grey-900 ring-1 ring-inset ring-grey-300 placeholder:text-grey-400 focus:outline-none focus:ring-2 focus: ring-primary-400 bg-grey-50 sm:text-sm sm:leading-6
Menambahkannya pada templat kami, kami mendapat yang berikut:
templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) { <input type="number" placeholder="Enter Int…" step="1" if interval != nil { min={ strconv.Itoa(interval.A) } max={ strconv.Itoa(interval.B) } } class="block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none] [&::-webkit-inner-spin-button]:[-webkit-appearance:none] [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]"> }
Kini anda sepatutnya mendapat input seperti teks, dengan beberapa pengesahan asas jika anda mengarahkan tetikus anda ke atasnya. Kami akan menambah fungsi untuk menyemak input integer yang sah dalam bahagian seterusnya.
Idea asas kotak spin integer ialah input yang hanya menerima integer. Saya pada mulanya cuba melaksanakan fungsi ini dengan menggunakan atribut corak HTML seperti berikut:
<input type="number" pattern="[0-9]+" ... >
Atribut corak mengambil rentetan regex dan menggunakannya untuk mengesahkan input pengguna, walau bagaimanapun, ia tidak menghalang input yang tidak sah daripada dimasukkan di tempat pertama. Sebenarnya, ia dibuat untuk pengesahan pihak pelanggan yang mudah.
Setiap kali pengguna menekan sebarang kekunci di dalam kotak input, peristiwa oninput dijana. tangkap peristiwa ini dengan sintaks Alpine x-on:input dan betulkan nilai sewajarnya untuk elemen input. Mari kita buat div induk dengan set atribut data-x dan tambahkan fungsi yang membolehkan kita menyemak sama ada input sama sekali Nombor... Selepas itu kita boleh membundarkan nilai dengan sewajarnya.
<div x-data="{isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }}"> <input ... x-on:input="$el.value = isNumber($el.value) ? Math.round($el.value) : null"> </div>
Bagi mereka yang tidak mengenali Alpine, $el di sini digunakan untuk merujuk kepada elemen DOM semasa.
Dalam div induk yang dibuat sebelum ini, kami menambah kelas="flex" berikut dan menambah atribut x-ref="spinbox" pada input supaya butang kami boleh mengubah suai keadaannya melalui sifat ajaib $refs.spinbox:
<div ... class="flex"> <input ... x-ref="spinbox"> </div>
Kami kemudian menambah anak baharu selepas input, yang akan mengandungi butang kami:
<div ...> <input ... x-ref="spinbox"> <div class="flex flex-col-reverse"> <!-- Decrement input's value --> <button type="button" class="flex-1 ...">-</button> <!-- Increment input's value --> <button type="button" class="flex-1 ...">+</button> </div> </div>
Di sini, kami menggunakan flex-col-reverse sebagai cara mudah untuk memastikan susunan tab betul, ia mesti tab dahulu ke '-', kemudian '+'.
Kami kemudian menambah pengendali acara pada butang menggunakan x-on:click, kod penuh (tidak termasuk CSS) adalah seperti berikut:
<div ... x-data="{ inc() { var e = $refs.spinbox; e.value = Math.min(Number(e.value) + Number(e.step), e.max); }, dec() { var e = $refs.spinbox; e.value = Math.max(Number(e.value) - Number(e.step), e.min); }, isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) } }"> <input ... x-ref="spinbox" x-on:input="$el.value = isNumber($el.value) ? Math.round($el.value) : null"> <div ...> <!-- Decrement input's value --> <button type="button" ... x-on:click="dec">-</button> <!-- Increment input's value --> <button type="button" ... x-on:click="inc">+</button> </div> </div>
Kita perlu menukar e.value dan e.step sebelum melakukan sebarang aritmetik kerana itu adalah rentetan.
Mengenai CSS untuk butang pemutar, ia digayakan sangat serupa dengan input, kod penuh ada di bawah .
templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) { <!-- Disable inner & outer spinner buttons, use buttons to render increment and decrement input value... --> <div class="flex-1"> @InputLabel(name, label + " " + interval.toString(), tooltip) <input type="number" placeholder="Enter Int…" step="1" if interval != nil { min={ strconv.Itoa(interval.A) } max={ strconv.Itoa(interval.B) } } name={ name } value={ value } class="block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none] [&::-webkit-inner-spin-button]:[-webkit-appearance:none] [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]" x-on:input="$el.value = !isNumber($el.value) ? null : Math.round($el.value)" x-ref="spinbox" autocomplete="off" > <div class="flex flex-col-reverse font-medium"> <!-- Decrement input's value --> <button type="button" class="flex-1 px-1 leading-none transition-colors ease-linear duration-100 rounded-br-md text-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-inset focus:ring-2 focus:ring-primary-400 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]" x-on:click="dec">-</button> <!-- Increment input's value --> <button type="button" class="flex-1 px-1 leading-none transition-colors ease-linear duration-100 rounded-tr-md text-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-inset focus:ring-2 focus:ring-primary-400 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]" x-on:click="inc">+</button> </div> </div> </div> }
Nikmati :)
Atas ialah kandungan terperinci Membuat Spinner yang Bersih dan mesra di Go/Templ. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!