用number输入框限制输入数字位数、字体随数字长度变化方法
这里需要使用宽度相同的字体，比如数字1和数字8是等宽的，这里使用的是dinpro-regular.otf
需求：
1.允许输入15位整数，两位小数
2.输入框宽度固定，字体随内容的长度变化
3.禁止输入多个0开头
ps: 以上前提是用户输入的是数字，非数字报错处理(判断是否为空)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
@font-face{
font-family: "dinpro";
src: url("font/DINPro-Regular.otf");
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
}
#aa{
width: 300px;
height: 50px;
font-size: 40px;
font-family: "dinpro";
}
</style>
</head>
<body>
<input type="number" id="aa">
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script><script type="text/javascript">
$("#aa").on("input",function(){
var value = $(this).val();
if(value.indexOf(".")==-1){//没有小数点
//禁止输入多个0开头 输入00变为0 输入01后变为1
if( (parseFloat(value)==0 && value.length>1) || (parseFloat(value)!=0 && value.charAt(0)=="0") ){
$(this).val(value.substring(1));
}
if(value.length>15){
$(this).val(value.slice(0,15));
}
}else{//有小数点
//取两位小数
$(this).val(Math.floor(value*100)/100);
} //控制字体大小 14是输入框刚好可以显示的数字位数，具体根数实际情况设置
if($(this).val().length>14){
$(this).css("font-size",40*(14/$(this).val().length)+"px");
}else{
$(this).css("font-size","40px");
}
});
</script>
</body>
</html>Atas ialah kandungan terperinci 用number输入框限制输入数字位数、字体随数字长度变化方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Melumpuhkan Panduan Pengalaman Input Win11
Dec 27, 2023 am 11:07 AM
Baru-baru ini, ramai pengguna Win11 menghadapi masalah bahawa kotak dialog pengalaman input sentiasa berkelip dan tidak boleh dimatikan Ini sebenarnya disebabkan oleh perkhidmatan sistem lalai dan komponen Win11 perkhidmatan pengalaman input Selesai, mari kita mencubanya. Cara mematikan pengalaman input dalam win11: Langkah pertama, klik kanan menu mula dan buka "Pengurus Tugasan". mengikut urutan, klik kanan "Tamat Tugas" "Langkah ketiga, buka menu mula, cari dan buka "Perkhidmatan" di bahagian atas. Langkah keempat, cari "Textinp" di dalamnya
![Input Windows menemui hang atau penggunaan memori yang tinggi [Betulkan]](https://img.php.cn/upload/article/000/887/227/170835409686241.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Input Windows menemui hang atau penggunaan memori yang tinggi [Betulkan]
Feb 19, 2024 pm 10:48 PM
Pengalaman input Windows ialah perkhidmatan sistem utama yang bertanggungjawab untuk memproses input pengguna daripada pelbagai peranti antara muka manusia. Ia bermula secara automatik pada permulaan sistem dan berjalan di latar belakang. Walau bagaimanapun, kadangkala perkhidmatan ini mungkin secara automatik menggantung atau menduduki terlalu banyak memori, mengakibatkan prestasi sistem berkurangan. Oleh itu, adalah penting untuk memantau dan mengurus proses ini tepat pada masanya untuk memastikan kecekapan dan kestabilan sistem. Dalam artikel ini, kami akan berkongsi cara untuk membetulkan isu di mana pengalaman input Windows tergantung atau menyebabkan penggunaan memori yang tinggi. Perkhidmatan Pengalaman Input Windows tidak mempunyai antara muka pengguna, tetapi ia berkait rapat dengan pengendalian tugas dan fungsi sistem asas yang berkaitan dengan peranti input. Peranannya adalah untuk membantu sistem Windows memahami setiap input yang dimasukkan oleh pengguna.
iOS 17: Cara menukar gaya jam iPhone dalam mod siap sedia
Sep 10, 2023 pm 09:21 PM
Siap sedia ialah mod skrin kunci yang diaktifkan apabila iPhone dipalamkan ke dalam pengecas dan berorientasikan dalam orientasi mendatar (atau landskap). Ia terdiri daripada tiga skrin berbeza, satu daripadanya dipaparkan masa skrin penuh. Teruskan membaca untuk mengetahui cara menukar gaya jam anda. Skrin ketiga StandBy memaparkan masa dan tarikh dalam pelbagai tema yang boleh anda leret secara menegak. Sesetengah tema juga memaparkan maklumat tambahan, seperti suhu atau penggera seterusnya. Jika anda menahan sebarang jam, anda boleh bertukar antara tema yang berbeza, termasuk Digital, Analog, Dunia, Suria dan Terapung. Terapung memaparkan masa dalam nombor gelembung besar dalam warna yang boleh disesuaikan, Solar mempunyai fon yang lebih standard dengan reka bentuk suar matahari dalam warna yang berbeza, dan Dunia memaparkan dunia dengan menyerlahkan
Hasilkan nombor rawak dan rentetan dalam JavaScript
Sep 02, 2023 am 08:57 AM
Keupayaan untuk menjana nombor rawak atau rentetan alfanumerik berguna dalam banyak situasi. Anda boleh menggunakannya untuk melahirkan musuh atau makanan di lokasi yang berbeza dalam permainan. Anda juga boleh menggunakannya untuk mencadangkan kata laluan rawak kepada pengguna atau mencipta nama fail untuk menyimpan fail. Saya menulis tutorial tentang cara menjana rentetan alfanumerik rawak dalam PHP. Saya berkata pada permulaan siaran ini bahawa beberapa peristiwa benar-benar rawak, dan perkara yang sama berlaku untuk nombor rawak atau penjanaan rentetan. Dalam tutorial ini, saya akan menunjukkan kepada anda cara menjana rentetan alfanumerik pseudo-rawak dalam JavaScript. Menjana Nombor Rawak dalam JavaScript Mari mulakan dengan menjana nombor rawak. Kaedah pertama yang terlintas di fikiran ialah Math.random(), yang mengembalikan apungan
Program C++ untuk membundarkan nombor kepada n tempat perpuluhan
Sep 12, 2023 pm 05:13 PM
Mewakili nombor sebagai output adalah tugas yang menarik dan penting apabila menulis program dalam mana-mana bahasa. Untuk jenis integer (data jenis pendek, panjang atau sederhana), mudah untuk mewakili nombor sebagai output. Untuk nombor titik terapung (jenis terapung atau berganda), kadangkala kita perlu membundarkannya kepada nombor tempat perpuluhan tertentu. Sebagai contoh, jika kita ingin mewakili 52.24568 sebagai tiga tempat perpuluhan, beberapa prapemprosesan diperlukan. Dalam artikel ini, kami akan memperkenalkan beberapa teknik untuk mewakili nombor titik terapung kepada nombor tempat perpuluhan tertentu dengan membundarkan. Antara pendekatan yang berbeza, adalah penting untuk menggunakan rentetan format seperti C, menggunakan hujah ketepatan dan menggunakan fungsi round() daripada perpustakaan matematik. Mari kita lihat mereka satu persatu. dengan
Gunakan C++ untuk menulis kod untuk mencari nombor bukan persegi Nth
Aug 30, 2023 pm 10:41 PM
Kita semua tahu nombor yang bukan kuasa dua mana-mana nombor, seperti 2, 3, 5, 7, 8, dll. Terdapat N nombor bukan persegi, dan adalah mustahil untuk mengetahui setiap nombor. Jadi, dalam artikel ini, kami akan menerangkan segala-galanya tentang nombor tanpa kuasa dua atau bukan kuasa dua dan cara untuk mencari nombor bukan kuasa dua N dalam C++. Nombor bukan kuasa dua ken Jika nombor ialah kuasa dua integer, maka nombor itu dipanggil kuasa dua sempurna. Beberapa contoh nombor kuasa dua sempurna ialah -1isquareof14issquareof29issquareof316issquareof425issquareof5 Jika nombor bukan kuasa dua mana-mana integer, maka nombor itu dipanggil bukan kuasa dua. Sebagai contoh, 15 nombor bukan kuasa dua yang pertama ialah -2,3,5,6,
Nombor dalam Java (dengan 0 awalan dan rentetan)
Aug 29, 2023 pm 01:45 PM
Nombor dalam Java Adalah penting untuk memahami bahawa kelas nombor bukanlah kelas nyata tetapi kelas abstrak. Di dalamnya, kami mempunyai satu set kelas pembalut yang mentakrifkan fungsinya. Kelas pembalut ini termasuk Integer, Byte, Double, Short, Float dan Long. Anda mungkin perasan bahawa ini adalah jenis data asas yang sama yang kita bincangkan sebelum ini, tetapi ia diwakili sebagai kelas berasingan dengan nama huruf besar untuk mematuhi konvensyen penamaan kelas. Pengkompil secara automatik menukar jenis data primitif kepada objek dan sebaliknya seperti yang diperlukan untuk fungsi atau skop program tertentu, dan kelas berangka adalah sebahagian daripada pakej java.lang. Proses ini dipanggil autoboxing dan unboxing. Dengan memahami sifat abstrak kelas angka dan kelas pembalut yang sepadan, kita boleh
Cari nombor yang tidak boleh dibahagikan dengan mana-mana nombor dalam julat, menggunakan C++
Sep 13, 2023 pm 09:21 PM
Dalam artikel ini, kita akan membincangkan masalah mencari nombor antara 1 dan n (diberi) yang tidak boleh dibahagikan dengan sebarang nombor antara 2 dan 10. Mari kita fahami ini dengan beberapa contoh - Input:num=14Output:3Penjelasan:Terdapat tiga nombor,1,11,dan13,yang tidak boleh dibahagikan.Input:num=21Output:5Penjelasan:Terdapat nombor1,11,13,17,dan19,yang tidak boleh dibahagi jika
