JSFiddle - React, Tailwind, and code Playground

by Hema Nandagopal

HTML

<input type="textbox" class="name"/>
    <div class="keyboard hide col-sm-12" id="keyboard8">
                    <div>
                        <input type="button" value="1" >
                        <input type="button" value="2" >
                        <input type="button" value="3">
                        <input type="button" value="4">
                        <input type="button" value="5">
                        <input type="button" class="ctrl" id="iAlpha" value="ABC" />
                    </div>
                    <div>
                        <input type="button" value="6" >
                        <input type="button" value="7" >
                        <input type="button" value="8">
                        <input type="button" value="9">
                        <input type="button" value="0">
          </div>
                </div>

JavaScript

var lastFocused;

function insertText(text, clear, backspace) {
  var input = lastFocused;
  

  if (input == undefined) { return; }

  if (clear) {
        input.value = "";
        return;
    }   

  if (backspace)
    {
        var position = input.selectionStart;
        if (position == 0) return;
        var text = input.value;

        input.value = [text.slice(0, position - 1), text.slice(position)].join('');
        input.selectionStart = position - 1;
        input.selectionEnd = position - 1;
        return;
  }


  var attr = $(input).attr('maxlength');

 
  if (typeof attr !== typeof undefined && attr !== false) {
      if (input.value.length == attr) return;
  }


  var scrollPos = input.scrollTop;
  var pos = 0;


  pos = input.selectionStart
  var front = (input.value).substring(0, pos);  
  var back = (input.value).substring(pos, input.value.length); 
  input.value = front + text + back;
  pos = pos + text.length;


};

$(function(){
    $('.required').on('Next.toggle', function () {
        if (typeof this.value === "undefined") return;
        if (this.value.trim().length >0)
            $('#next').prop('disabled', false);
        else
            $('#next').prop('disabled', true);
        }); 
    $("input[type='text']").on("click focus", function () {
        $(this).removeClass("blurElements");
        lastFocused = document.activeElement;
    });
    $("input[type='text']").on("click focus", function () {
       $(this).css("border", "3px solid #3A95EF");
    });
    $("input[type='text']").on("blur", function () {
        $(this).css("border", "3px solid #ccc");
    });
    $("input[type='password']").on("click focus", function () {
        lastFocused = document.activeElement;
    }); 
   $("input[type='password']").on("blur", function () {
       $(this).css("border", " 3px solid #ccc");
        $(this).removeClass("focusElements");
    });



});