Add character counter to a Text Input Dial or Multiline Text Input Dial - xmpie-users/uStore-js GitHub Wiki

This is an extension to the A text area dial with a character counter method. However this will allow you to add a Character count to existing Text Input Dials or Multiline Text Input Dials (Property or Customization Dial) The simple way to use this script is to add an additional Dummy Property Dial or Customization Dial HTML Generic control to a Product. If using a Customization Dial you can create a Dummy Variable that can be used to Create the HTML Generic control. Then copy the JavaScript code to the Dummy HTML Generic control (no callback function required).

This Script works by creating a JavaScript function called "addDialCounter" which takes 2 parameters "Dial Display Name" and the character count i.e addDialCounter("My Text Dial", 100);

HTML Markup is below:

<script type="text/javascript">
function addDialCounter(DialName, limit) {

 var n=$('span:contains('+DialName +')').attr("id");

//Check if dial name exists
if(typeof n == 'undefined'){
return;
}
 var id=n.split('_')[3];
 var dial = id.replace("_Duc","");

var myDial = $("[name*='"+dial+"'][name*='String']");
myDial.parent().append('<div  id="counter_'+dial+'"></div>');
  //change these if need to change qty or message:
  var characters = limit;
  var message = "You have <strong>{characters}</strong> characters remaining.";
  var counter = $("#counter_"+dial);
  counter.append(message.replace("{characters}",characters));  
 myDial.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");
     }
    return (myDial.val());
    });

}

$(document).ready(function() {
  addDialCounter("My Text Dial", 100);
  });
</script>
⚠️ **GitHub.com Fallback** ⚠️