JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<input type="text" readonly value="0001">
<input type="text" data-custval-type="" value="0002">
<input type="text" data-custval-type="decimal" value="0003">
<input type="text" data-custval-type="decimal" readonly value="0004">
<input type="text" data-custval-type="string" readonly value="0005">
<input type="text" data-custval-type="decimal" disabled value="0006">
<input type="text" data-custval-type="string" readonly value="0007">

<pre class="pre-one"></pre><br>
<pre class="pre-two"></pre>

CSS

.pre-one{
  border:1px solid green;
}
.pre-two{
  border:1px solid red;
}

input{
  margin:0.4em;
}

.dirty{color:red}

JavaScript

const el = {};

 
 $('input').on('focus',function(e){
 
 let elm = $(this);
 
  el.readonly = elm.attr('readonly');
  el.disabled = elm.attr('disabled');
  el.custval = elm.attr('data-custval-type');
  el.dirtyFalsePos = false;
  el.valChanged = false;
  el.isDirty = false;
  el.value = elm.val();


console.log('focus');
 $('.pre-one').text(JSON.stringify(el));
 
 }).on('blur', function() {
    

   // check for false-positive on functional fired decimal value changes on readonly or disabled elmements
   if (el.custval === 'decimal' && (el.readonly || el.disabled)) {
     el.dirtyFalsePos = true;
   }
   
    if(el.custval === 'string'){
    console.log('is string');
    $(this).val('12345');
    }
 
  
   if(el.value !== ($(this).val())){
   el.isDirty = true;
   $('.pre-two').addClass('dirty');
   }else {
   $('.pre-two').removeClass('dirty');
   }
   
   
   $('.pre-two').text(JSON.stringify(el));
   

 });