A text area dial with a character counter - xmpie-users/uStore-js GitHub Wiki

In many cases, when you have a textarea dial control for a customization or product property, you want to permit up to a certain number of characters to be entered and also to show the customer how much is remaining.

This simple HTML Generic control can do just that:

Display name - set a meaningful dial name that the cusotmer will understand Visible to customer - checked Input control - set HTML Generic Take values from predefined values - checked Callback function - returnValue HTML Markup is below:

<table border="0" cellspacing="0" cellpadding="0"> <tbody>
  <tr valign="baseline">
    <td>
      <div class="FormLabel" style="width: 190px;">#DIAL_DISPLAY_NAME#: </div>
    </td>
    <td>
      <textarea  id="text" rows="4" columns="90"></textarea>
      <div  id="counter"></div>
    </td>
  </tr>
</tbody>
</table>

<script type="text/javascript">
$(document).ready(function() {

  //change these if need to change qty or message:
  var characters = 100;
  var message = "You have <strong>{characters}</strong> characters remaining.";

  $("#counter").append(message.replace("{characters}",characters));  
  $("#text").keyup(function() {
    if($(this).val().length > characters){
      $(this).val($(this).val().substr(0, characters));
    }
    var remaining = characters -  $(this).val().length;
    $("#counter").html(message.replace("{characters}",remaining));
    if(remaining <= 10) {
     $("#counter").css("color","red");
     } else {
       $("#counter").css("color","black");
     }
    returnValue($("#text").val());
    });
  });
</script>
⚠️ **GitHub.com Fallback** ⚠️