JSFiddle - React, Tailwind, and code Playground

by Amin Pourhadi

HTML

<body class="inSysIFrame" id="inSysIFrame" ><br>
 <table cellpadding="0" cellspacing="1" align="center" bgcolor="white" border="0">
  <tr>
   <td>
    <div style="height:257px; width:100%; overflow-x:hidden; overflow-y:scroll;">
     <form>
      <table height="25">
       <tr>
        <td class="formLabel" width="130">Sys ID</td>
        <td class="formColon">:</td>
        <td class="formInput rtl" style="width:50px; background-color:#fff; color:red; border:none;">1</td>
        <td width="202px"></td>
        <td class="formLabel" width="130">Sys Version</td>
        <td class="formColon">:</td>
        <td class="formInput req" style="width:50px;">
         <input class="formInput req" style="border:none; width:50px;" type="text" id="sysversion" value="12" pattern="[0-9][0-9].[0-9][0-9]"/>
        </td>
       </tr>
      </table>
      <table height="25">
       <tr>
        <td class="formLabel" width="130">Sys Name</td>
        <td class="formColon">:</td>
        <td class="formInput rtl req" style="width:200px;">
         <input class="formInput rtl req" style="border:none; width:200px;" type="text" id="sysname" value="Payroll" pattern="[a-z]{1,20}"/>
        </td>
        <td width="50px"></td>
        <td class="formLabel" width="130">About</td>
        <td class="formColon">:</td>
        <td class="formInput rtl" style="width:200px;">
         <input class="formInput rtl" style="border:none; width:200px;" type="text" id="sysabout" value="This is payroll system"/>
        </td>
       </tr>
      </table>
     </form>
    </div>
   </td>
  </tr>
  <tr height="25">
   <td class="dgFooter" style="width:100%; text-align:center; vertical-align:middle;">
    <span class="footer-lnk" style="border-right:2px solid white;" onclick="window.location.href='test_1.php';">&nbsp;&nbsp;Return&nbsp;&nbsp;</span>
    <span class="footer-lnk" id="sysEditIcon" style="border-right:2px solid white; border-left:2px solid white;">&nbsp;&nbsp;Edit&nbsp;&nbsp;</span>
  ...

CSS

input:focus , a:focus {outline: none;}
input:required:invalid {box-shadow: none; 
.rtl input:required:invalid  {box-shadow: none; 
.formColon {width:3px; font-weight:bold; padding:0px;}
.formLabel {font:normal 13px tahoma;  padding:4px; }
.formInput {font:normal 14px courier; padding:0px; border:1px solid black; background-color:#4269B3; color:#fff; direction:ltr;}
.formInput input:invalid  {box-shadow:none; color:yellow;}

JavaScript

$(document).ready(function() {
 $(".rtl").css("direction","rtl"); 
 $("#inSysIFrame").fadeIn(1000,"linear").promise().done(function() 
  {$(".req").attr("required","required");
   $("input:first").focus();
   $("input:text").bind("keydown", function(e)
	{ whatKey = (e.keyCode || e.which);
	  if (whatKey==9 || whatKey==13 || whatKey==40 || whatKey==38)
	   { e.preventDefault();
         if (document.querySelectorAll(":invalid").length==0) 
          { $("#sysEditIcon").css("cursor","pointer"); 
            $("#sysEditIcon").click(function() { window.location.href=(confirm('Edit Record?'))?'a.php':'b.php'; }); }
         else alert(document.querySelectorAll(":invalid").length);
	     var nextIndex = $("input:text").index(this) + (whatKey==38?-1:1); nextIndex = nextIndex==-1 ? $("input:text").length-1 : nextIndex==$("input:text").length ? 0 : nextIndex;
         $("input:text")[nextIndex].focus(); }});}); });