Admin Input Field Character Count via jQuery

 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 7 years ago
  2. Collapsed stacked inlines by Aneon 4 years, 11 months ago
  3. Confirm alert if the user navigates away without saving changes by mrazzari 4 years, 9 months ago
  4. Adding buttons to submit line in a Admin page by marinho 5 years, 11 months ago
  5. Disable fields in oldforms admin using jQuery by schraal 5 years, 10 months ago

Comments

(Forgotten your password?)