JSFiddle - React, Tailwind, and code Playground

by 25058214

HTML

<div class="hs_email hs-email hs-fieldtype-text field hs-form-field" data-reactid=".hbspt-forms-0.1:$0">
  <label id="label-email-a05fe5eb-143e-48af-a836-69a6f07f83e0_6820" class="" placeholder="Enter your Email" for="email-a05fe5eb-143e-48af-a836-69a6f07f83e0_6820" data-reactid=".hbspt-forms-0.1:$0.0">
    <span data-reactid=".hbspt-forms-0.1:$0.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.1:$0.0.1">*</span>
  </label>
  <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$0.1"></legend>
  <div class="input" data-reactid=".hbspt-forms-0.1:$0.$email">
    <input id="email-a05fe5eb-143e-48af-a836-69a6f07f83e0_6820" class="hs-input" type="email" name="email" required="" placeholder="" value="" autocomplete="email" data-reactid=".hbspt-forms-0.1:$0.$email.0" inputmode="email">
  </div>
</div>

CSS

.focus {
  color: red;
}

JavaScript

function getTargetParent(elem, targetClass) {
    var currElem = elem;
    while(
  	  currElem
  	  && !currElem.classList.contains(targetClass)
    ) {
    	currElem = currElem.parentNode;
    }
    return currElem;
}

/**
* Add a focus event listener to an element to add "focus" class on the parent identified by targetClass
**/
function addFocusListener(elem, targetClass) {
  var targetParent = getTargetParent(elem, targetClass);
  if(targetParent) {
		elem.addEventListener('focus', function() {
	    targetParent.classList.add('focus');
    });
    elem.addEventListener('blur', function() {
    	targetParent.classList.remove('focus');
    });
  }
}

var inputs = document.getElementsByClassName('hs-input');
for(var i = 0; i < inputs.length; i++) {
	addFocusListener(inputs[i], 'field');
}