JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<input type='text' maxlength='3' /><br/>

<input type='text' id='txt' data-length='3'/><br/>

<input type='text' id='txt1' data-length='3' data-model='Ch'/>

CSS

input{
    margin:10px;                        
}

JavaScript

window.onload = function() {
  var limitNode = document.getElementById('txt');
  var limitLength = function(self) {
      var val = self.value,
          len = val.length,
          dataLength = self.getAttribute('data-length');
          if(len > dataLength) {
            self.value = val.substr(0, dataLength);
          }    
   };
    limitNode.onfocus = function() {
      limitLength(this);
    };
    limitNode.onkeyup = function() {
      limitLength(this);
    }
    limitNode.onblur = function() {
      limitLength(this);
    }
}
 //
var char = document.getElementById('txt1');

var strLen = (function() {
   var trim = function(chars) {
      return (chars || '').replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,'');
   }
   return function(str, model) {
     str = trim(str);
     model = model || 'Ch';
     var _strLen = str.length;
     if(_strLen === 0) {
         return 0;
      } else {
         var Ch = str.match(/[\u4e00-\u9fa5]/g);
         return _strLen = (Ch && model === 'Ch' ? Ch.length : 0);  
      }
  }
}());

var forElementArr = function(elem, callback) {
    var  self = this;
    if(!(elem instanceof Array)) {
       elem = [elem];
    } 
    for(var i = 0, len = elem.length; i < len; i++) {
      var eleml = elem[i];
      if(typeof arrl === 'string') {
        arrl = document.getElementById(arrl);     
      }
      callback && callback(i, arrl);  
    }
};

var showChar = function(nums, char) {
    if(char.search(',') != -1) {
      char = char.split(',');
    }
    forElementArr(char, function(index, self) {
      self.innerHTML = (nums && nums.toString()) || '0';
    });
};
var clearNumber = function(self) {
   var value = self.value,
       len = value.length,
       dataLength = self.getAttribute('data-length'),
       //remainChars = self.getAttribute('data-remain');
    if(value.length > dataLength) {
      self.value = value.substr(0, dataLength);
    };
   var dataModel = self.getAttribute('data-model');
   var subLen = dataLength; 
   var...