JQuery Input Text Counter

JQuery Input Text Counter dành cho Bootstrap

Hi các bạn

Nay mình sẽ giới thiệu cho các bạn 1 library cũng khá là hay, đó là JQuery Input Text Counter.

Nó sẽ giúp chúng ta giới hạn được số kí tự mà mình mong muốn cho 1 field input.

Demo Picture:

JQuery Input Text Counter

1/ Tải vềJQuery Input Text Counter

CSS + JS: https://codepen.io/anon/pen/gKdKPq

2/ Sử dụng

Rất đơn giản, tại Input bạn muốn, thêm class này vào:

input-char-count

Cùng với thuộc tính:

maxlength="{{integer}}"

Full example:

<input type="text" class="form-control input-char-count" maxlength="150">

Với example như trên, mình sẽ có 1 input với maximum kí tự có thể nhập vào là 150.

3/ Lưu ý nhỏ

Vì cái tag (20/150) như hình trên nó đặt ở vị trí absolute. Cho nên khi bạn gán cái này vào, có thể nó bị bay chỗ khác không xác định.

Để tránh điều này, ta nên bọc lại cái input này 1 thẻ div và cho nó position = relative.

<div class="form-group" style=" position: relative;">
	<input type="text" class="form-control input-char-count" maxlength="150">
</div>

Với code trên, cái tag đó sẽ hiện ngay đúng bên cuối phía trên của cái input.

4/ Kết luận

JQuery Input Text Counter là một trong những cái mà mình thấy hay muốn chia sẻ tới.

Copy & Paste nếu length dài quá nó sẽ tự cắt chuỗi ra nhé 😀 Tested on Firefox and Chrome.

Cám ơn các bạn đã quan tâm!

facebook
google+
Seth Phát

Seth Phát

Mình là Phát - biệt danh Seth Sandaru. Hiện đang là một Full-Stack Developer. Mình là một người yêu thích và đam mê lập trình và hiện tại đang theo về phần Web là chủ yếu. Mình rất thích chia sẻ những thứ kiến thức liên quan tới lĩnh vực này. Mong các bạn ủng hộ web của mình!

Leave a Reply

Your email address will not be published. Required fields are marked *

Bình luận qua Facebook