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">
<form name="myForm">
  <input  maxlength="19"  type="text" ng-model="c"  name="c" id="ccNr" spellcheck="false"  autocomplete="off" ng-keydown="cardDown($event)" ng-keyup="cardUp($event)" pattern="^[X0-9_ ]+$"  /><span class="ss" style="margin-left:-3.25%;cursor:pointer;margin-right:2%;">X</span>       
  <button >click</button><br>
  <span ng-if="myForm.c.$invalid && myForm.c.$dirty">Only numbers are valid.</span>
</form>
</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;
$scope.validate=false;
 /* $scope.c=$scope.b.join(""); */
 /* $("input").val($scope.c); */
/* $("input").focusin(function(){})  */
$scope.cardDown=function(e){
if(e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 8 || e.keyCode == 46 || e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 32){
	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 );
        }
};
$scope.cardUp=function(e){
if(e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 8 ||  e.keyCode == 46 || e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 32){
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';
          }
            
          $scope.c=$scope.b.join("");
          $('input').attr('value', '');  
        $("input").val($scope.c);
        	 $("input").prop('disabled', false);
           $("input").focus();
           var ele = document.getElementById('ccNr');
        ele.focus();
        ele.setSelectionRange( $scope.num,$scope.num );
      ...