Count Characters

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of Count Characters
                    $('.js-count-characters').each(function () {
                      new HSCountCharacters($(this)).init()
                    });
                  });
                </script>

Basic examples

Preview
HTML

Review

                    
                      <!-- Form Group -->
                      <div class="form-group">
                        <div class="d-flex justify-content-between">
                          <label for="reviewLabel" class="input-label">Review</label>

                          <span id="basicCountCharacters" class="text-muted"></span>
                        </div>
                        <textarea class="form-control js-count-characters" id="reviewLabel" placeholder="Textarea field" rows="4"
                                  data-hs-count-characters-options='{
                                    "output": "#basicCountCharacters"
                                  }'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
                      </div>
                      <!-- End Form Group -->

Max length

Use maxlength="*" attribute

Preview
HTML

Review

                    
                      <!-- Form Group -->
                      <div class="form-group">
                        <div class="d-flex justify-content-between">
                          <label for="reviewLabelModalEg" class="input-label">Review</label>

                          <span id="maxLengthCountCharacters" class="text-muted"></span>
                        </div>
                        <textarea class="form-control js-count-characters" id="reviewLabelModalEg" placeholder="Textarea field" rows="4" maxlength="100"
                                  data-hs-count-characters-options='{
                                    "output": "#maxLengthCountCharacters"
                                  }'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
                      </div>
                      <!-- End Form Group -->

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Count characters</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <!-- Form Group -->
                              <div class="form-group">
                                <div class="d-flex justify-content-between">
                                  <label for="reviewModalEgLabel" class="input-label">Review</label>

                                  <span id="basicCountCharactersModalEg" class="text-muted"></span>
                                </div>
                                <textarea class="form-control js-count-characters" id="reviewModalEgLabel" placeholder="Textarea field" rows="4"
                                          data-hs-count-characters-options='{
                                            "output": "#basicCountCharactersModalEg"
                                          }'>As always, all Htmlstream products are excellent with a very good personalization.</textarea>
                              </div>
                              <!-- End Form Group -->
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

Methods

Parameters	Description	Default value
`output`	Element to display the number of characters.	`null`

How to use

Basic examples

Max length

Modal example

Methods