Login

Admin Input Field Character Count via jQuery

Author:
joshman
Posted:
December 10, 2008
Language:
JavaScript
Version:
Not specified
Tags:
template javascript admin jquery form input
Score:
0 (after 0 ratings)

Use this code in change_form.html in your projects admin templates to add a character counter beside the input field(s) in admin to let users know how many characters they have remaining for a particular input field. The total number of characters allowed is determined by the max_length in your model for the models.CharField you're using this with.

This code is designed to add the counter after the input field, but could easily be customized to fit the style of any admin. If the number of characters remaining is 10 or less the background color changes to yellow to visually warn the user.

Usage Examples:
In this example only the input field with id=id_pull_quote will receive the counter:

 $(document).ready(function() {   
   $("#id_pull_quote").counter();   
 });

You could also apply the counter to all input fields on a page:

 $(document).ready(function() {
   $("form input[@maxlength]").counter();
 });

Note: You have to download jQuery to your project and place the appropriate call in order for this to work. The best place to do this is in the extrahead block. I left my call in as an example but your path and file name will probably vary.

Credit for base jQuery code goes to Brad Landis at bradlis7.com.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{% extends "admin/change_form.html" %}
{% load i18n admin_modify adminmedia %}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="../../../jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery-1.2.6.min.js"></script>
{{ media }}

<script type="text/javascript">
jQuery.fn.counter = function() {
  // setup initial counter display
  $(this).each(function() {
    var max = $(this).attr('maxlength');
    var val = $(this).attr('value');
    var cur = 0;
    if(val) // value="", or no value at all will cause an error
      cur = val.length;
    var left = max-cur;
    $(this).after("<span class='counter'>"
      + left.toString()+"</span> characters remaining");
    // Style as desired
    var c = $(this).next(".counter");
    c.css("margin-left","10px");
    c.css("padding", "0 3px 0 3px")
    c.css("border", "1px solid #ccc")
    if(left <= 10)
        c.css("background","#F4F379");
    else
        c.css("background","none");
 
    // setup counter to change with keystrokes 
    $(this).keyup(function(i) {
      var max = $(this).attr('maxlength');
      var val = $(this).attr('value');
      var cur = 0;
      if(val)
        cur = val.length;
      var left = max-cur;
      var c = $(this).next(".counter");
      c.text(left.toString());
      if(left <= 10)
          c.css("background","#F4F379");
      else
          c.css("background","none");
      return this;
    });
  });
  return this;
}

$(document).ready(function() {
  $("#id_pull_quote").counter();
});

//-->
</script>
{% endblock %}

More like this

  1. FieldsetForm by Ciantic 8 years ago
  2. Collapsed stacked inlines by Aneon 5 years, 11 months ago
  3. Confirm alert if the user navigates away without saving changes by mrazzari 5 years, 9 months ago
  4. Disable fields in oldforms admin using jQuery by schraal 6 years, 10 months ago
  5. Adding buttons to submit line in a Admin page by marinho 6 years, 11 months ago

Comments

Please login first before commenting.