JSFiddle - React, Tailwind, and code Playground

by Prajeesh_PR

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input  type="text" ng-model="c"   id="ccNr" spellcheck="false"  autocomplete="off"    maxlength="19" /><span class="ss" style="margin-left:-3.25%;cursor:pointer;margin-right:2%;">X</span>       
<button >click</button>
</div>

CSS

input {
  color: transparent;
  text-shadow: 0 0 0 black;
}

input:disabled {
    background-color: white !important;
    text-shadow: 0 0 0 black !important;
    border-width: 2px !important;
    border-style: ridge !important;
    border-color: initial !mportant;
    border-image: initial !important;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.b=["_","_","_","_"," ","_","_","_","_"," ","_","_","_","_"," ","_","_","_","_"];
$scope.c=[];
$scope.d=[];
$scope.num=0;
$(document).ready(function(){
 $scope.c=$scope.b.join("");
 /* $("input").val($scope.c); */
$("input").focusin(function(){}) 
$("input").keydown(function(e){ 
if(e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 8 || e.keyCode == 46 || e.keyCode == 38 || e.keyCode == 40){
  return false;
  $("input").prop('disabled', false); 
  $("input").focus();
}

if($scope.num<14){
  $scope.b[$scope.num]='';
  $scope.c=$scope.b.join("");
   $('input').attr('value', '');   
   $("input").val($scope.c); 
   var ele1 = document.getElementById('ccNr');
        ele1.focus();
        ele1.setSelectionRange( $scope.num,$scope.num );
        }
});
$("input").keyup(function(e){
if(e.keyCode == 8){
    if($scope.num<14){
      $scope.b[$scope.num-1]='_';
    $scope.c=$scope.b.join("");
    $('input').attr('value', '');  
        $("input").val($scope.c);
    $scope.d.pop();
    if($scope.num){
      $scope.num--;
    }
    if($scope.num==5 || $scope.num==10 || $scope.num==15){
    $scope.num--;
    }
    } else {
    
    }
    
}
if(e.keyCode == 37 || e.keyCode == 39  || e.keyCode == 46 || e.keyCode == 38 || e.keyCode == 40){
return false;
  $("input").prop('disabled', false); 
  $("input").focus();
}
$("input").prop('disabled', true);
  if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) { 
        if($scope.num<14){
          $scope.b[$scope.num]=e.originalEvent.key;
        $scope.d[$scope.num]=e.originalEvent.key;
        $scope.c=$scope.b.join("");
         /* $('input').attr('value', '');   */
        /* $("input").val($scope.c); */
        setTimeout(function(){
          if($scope.num%5==0){
            $scope.b[$scope.num-2]='X';
          } else {
            $scope.b[$scope.num-1]='X';
          }
            
         ...