Rumah > hujung hadapan web > tutorial js > js untuk melaksanakan kotak teks yang hanya membenarkan nombor untuk dimasukkan dan mengehadkan saiz kemahiran numbers_javascript

js untuk melaksanakan kotak teks yang hanya membenarkan nombor untuk dimasukkan dan mengehadkan saiz kemahiran numbers_javascript

WBOY
Lepaskan: 2016-05-16 15:44:19
asal
1510 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menggunakan js untuk melaksanakan kotak teks yang hanya membenarkan nombor untuk dimasukkan dan mengehadkan saiz nombor. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah kesan kotak input yang sangat diperibadikan Ia ditetapkan bahawa kotak teks hanya membenarkan input nombor Jika anda berkeras untuk memasukkan aksara lain, aksara yang dimasukkan akan hilang secara automatik melainkan anda memasukkan format aksara yang ditentukan. juga adalah sekatan pada saiz nombor input! Untuk memastikan keserasian, sila gunakan Firefox.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-input-limit-num-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<style type="text/css">
html,body{margin:0; padding:20px;}
</style>
</head>
<body>
<input type="text" id="input" />
<script type="text/javascript">
var text = document.getElementById("input");
text.onkeyup = function(){
this.value=this.value.replace(/\D/g,'');
if(text.value>100){
  text.value = 100;
}
}
</script>
</body>
</html>
Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan