Bộ đếm Số Ký Tự Trong Form Bằng Jquery | Lý Minh Phương

Trang chủ » đếm Trong Jquery » Bộ đếm Số Ký Tự Trong Form Bằng Jquery | Lý Minh Phương

Có thể bạn quan tâm

Bộ đếm số ký tự trong form bằng Jquery

lyphuong10 ♦ August 2, 2010 ♦ Leave a comment

Nguồn: http://tnduoc.com/blog/chitiet/Lap_trinh_web-jquery/Bo_dem_so_ky_tu_trong_form_bang_Jquery.tnd

Tôi hi vọng qua bài viết nay các bạn sẽ tìm được giải pháp tốt nhất cho việc giới hạn số tự trong form. Chúc các bạn thành công. Nhớ comment hay rating nhé. 😀

Javascript code

view source

print?

01 <b>script type="text/javascript" src="http://ajax.googleapis.com/
02 ajax/libs/jquery/1.4.2/jquery.min.js">
03 <script type="text/javascript">
04 $(document).ready(function()
05 {
06 $("#contentbox").keyup(function()
07 {
08 var box=$(this).val();
09 var main = box.length *100;
10 var value= (main / 145);
11 var count= 145 - box.length;
12
13 if(box.length <= 145)
14 {
15 $('#count').html(count);
16 $('#bar').animate(
17 {
18 "width": value+'%',
19 }, 1);
20 }
21 else
22 {
23 alert(' Full ');
24 }
25 return false;
26 });
27
28 });
29 </script>
30 </b>

HTML Code

view source

print?

1 <div>
2 <div id="count"><b>145</b></div>
3 <div id="barbox"><div id="bar"></div></div>
4 </div>
5 <textarea id="contentbox"></textarea>

CSS code

view source

print?

01 #bar
02 {
03 background-color:#5fbbde;
04 width:0px;
05 height:16px;
06 }
07 #barbox
08 {
09 float:right;
10 height:16px;
11 background-color:#FFFFFF;
12 width:100px;
13 border:solid 2px #000;
14 margin-right:3px;
15 -webkit-border-radius:5px;-moz-border-radius:5px;
16 }
17 #count
18 {
19 float:right; margin-right:8px;
20 font-family:'Georgia', Times New Roman, Times, serif;
21 font-size:16px;
22 font-weight:bold;
23 color:#666666
24 }
25 #contentbox
26 {
27 width:450px; height:50px;
28 border:solid 2px #006699;
29 font-family:Arial, Helvetica, sans-serif;
30 font-size:14px;
31 }

Share this:

  • Facebook
  • X
Like Loading...

Related

  • Posted in: JQuery
  • Tagged: Jquery

Từ khóa » đếm Trong Jquery