tests/test_fields.py

@@ -159,6 +159,20 @@ def test_text(pub):
     fields.TextField(display_mode='basic-rich').add_to_form(form)
     assert 'data-godo-schema="basic"' in str(form.render())
 
+    form = Form(use_tokens=False)
+    fields.TextField().add_to_form(form)
+    assert len(PyQuery(str(form.render())).find('template.feedback-maxlength')) == 0
+
+    form = Form(use_tokens=False)
+    fields.TextField(maxlength=110).add_to_form(form)
+    assert len(PyQuery(str(form.render())).find('template.feedback-maxlength')) == 1
+
+    form = Form(use_tokens=False)
+    fields.TextField(maxlength=110, display_mode='rich').add_to_form(form)
+    pq = PyQuery(str(form.render()))
+    assert pq.find('template.feedback-maxlength')
+    assert pq.find('textarea[data-godo-instant-update]')
+
 
 def test_text_anonymise(pub):
     formdef = FormDef()

wcs/qommon/form.py

@@ -693,6 +693,8 @@ class DurationWidget(StringWidget):
 
 
 class TextWidget(QuixoteTextWidget):
+    template_name = 'qommon/forms/widgets/text.html'
+
     prefill_attributes = None
 
     def __init__(self, name, *args, **kwargs):

wcs/qommon/static/js/qommon.forms.js

@@ -1035,3 +1035,36 @@ document.addEventListener('DOMContentLoaded', function(){
     initLiveValidation(blockWidgets)
   })
 })
+
+// Input left characters count
+document.addEventListener('DOMContentLoaded', function() {
+  for (const feedbackTpl of document.querySelectorAll('template.feedback-maxlength')) {
+    const textArea = document.getElementById(feedbackTpl.dataset.fieldId)
+
+    function renderFeedback() {
+      const contentDocument = new DOMParser().parseFromString(textArea.value, 'text/html');
+      const textContent = contentDocument.body.textContent || "";
+      const remainingCharacters = textArea.getAttribute('maxlength') - textContent.length
+
+      const newFeedback = feedbackTpl.content.cloneNode(true)
+      for(const child of newFeedback.querySelectorAll('*')) {
+        if(child.textContent) {
+          child.textContent = child.textContent.replace('{remaining_characters}', remainingCharacters)
+        }
+      }
+      return newFeedback.firstElementChild
+    }
+
+    let feedbackElement = renderFeedback()
+    textArea.after(feedbackElement)
+
+    function updateFeedback() {
+      const newFeedback = renderFeedback()
+      feedbackElement.replaceWith(newFeedback)
+      feedbackElement = newFeedback
+    }
+
+    textArea.addEventListener('input', updateFeedback)
+    textArea.addEventListener('change', updateFeedback)
+  }
+})

wcs/qommon/templates/qommon/forms/widgets/mini-rich-text.html

@@ -1,11 +1,18 @@
 {% extends "qommon/forms/widget.html" %}
+{% load i18n %}
+
 {% block widget-control %}
   <textarea style="width: 100%" id="form_{{widget.get_name_for_id}}" name="{{widget.name}}"
             {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}" {% endfor %}
-            {% if widget.live_condition_source %}data-godo-instant-update="true"{% endif %}
+            {% if widget.live_condition_source or widget.attrs|get:"maxlength" %}data-godo-instant-update="true"{% endif %}
             data-godo-schema="{{widget.EDITION_MODE}}"
             data-godo-update-event="wcs:live-update">
     {{widget.value|default:""}}
   </textarea>
+  {% if widget.attrs|get:"maxlength" %}
+    <template class='feedback-maxlength' data-field-id='form_{{widget.get_name_for_id}}'>
+      <p class="hint">{% trans "Remaining characters: {remaining_characters}" %} </p>
+    </template>
+  {% endif %}
   <script type="module" src="/static/xstatic/js/godo.js?{{version_hash}}"></script>
 {% endblock %}

wcs/qommon/templates/qommon/forms/widgets/text.html

@@ -0,0 +1,11 @@
+{% extends "qommon/forms/widget.html" %}
+{% load i18n %}
+
+{% block widget-control %}
+  {{ block.super }}
+  {% if widget.attrs|get:"maxlength" %}
+    <template class='feedback-maxlength' data-field-id='form_{{widget.get_name_for_id}}'>
+      <p class="hint">{% trans "Remaining characters: {remaining_characters}" %} </p>
+    </template>
+  {% endif %}
+{% endblock %}