How to set input:focus style programatically using JavaScript

Question

I'm building a UI library in JS that can, without relying on any CSS stylesheets, create UI components, stylised from code. So far, it's been quite easy, with exception of styling different control states (such as input:focus one).

Code that I use to create input field:

function newInput()
{
    var ctr = docmuent.createElement("input");
    ctr.setAttribute("type","text");
    ctr.setAttribute("value", some-default-value);
    ctr.style.fontFamily = "sans-serif,helvetica,verdana";
    /* some font setup here, like color, bold etc... */
    ctr.style.width = "256px";
    ctr.style.height = "32px";
    return ctr;
}

Styling it for default state is easy. However I am unsure how to set style for states such as focused, disabled or not-editable.

If I'd be having CSS stylesheets included in the project that would be easily sorted out. However I can't have any CSS files included, it must be pure JS.

Does anyone know how to set style for an input field state (eg. input:focus) straight from JS code?

No JQuery please :-) Just straight-up JS.

Thanks in advance!

Answer 1

You would need to add an event listener to the element in order to change the style of it. Here is a very basic example.

var input = document.getElementById("something");
input.addEventListener("focus", function () {
  this.style.backgroundColor = "red";  
});

<input type="text" id="something" />

Answer 2

Other alternative would be to build a stylesheet for the page.

Something like this:

 var styles='input:focus {background-color:red}';

 var styleTag=document.createElement('style');
 if (styleTag.styleSheet)
     styleTag.styleSheet.cssText=styles;
 else 
     styleTag.appendChild(document.createTextNode(styles));

 document.getElementsByTagName('head')[0].appendChild(styleTag);

This way you will have clean separation of css styles from the scripts and so the better maintenance.

Answer 3

Use CSS Variables if possible

It's 2022 and there are simpler solutions to this problem than adding event listeners all over the place that may never get cleaned up.

Instead if you have control over the CSS, do this:

.my-class {
  --focusHeight: 32px;
  --focusWidth: 256px;
}

.my-class:focus {
  height: var(--focusHeight);
  width: var(--focusWidth);
}

Then in your JavaScript it's as simple as using setProperty to update the variables:

const el = document.getElementById('elementId');
el.style.setProperty('--focusHeight', newFocusHeight);
el.style.setProperty('--focusWidth', newFocusWidth);

Answer 4

At first, create your input:

<input type="text" id="myElementID" />

Then add the javascript the following javascript:

const element = document.getElementById("myElementID");

// Add a box shadow on focus
element.addEventListener("focus", (e) => {
  e.target.style.boxShadow = "0 0 0 3px #006bff40";
});

// Remove the box shadow when the user doesn't focus anymore
element.addEventListener("blur", (e) => {
  e.target.style.boxShadow = "";
});

Answer 5

A quick oneliner, which dynamically appends a style tag to the body.

document.body.innerHTML += '<style>#foo:focus {background-color:gold}</style>'

<input id="foo"/>

Answer 6

let input = document.querySelector(".input-text");
    let label = document.querySelector('.fields-label');
    input.addEventListener('focus', function(e){
        label.classList.add('is-active');
    })
    input.addEventListener('blur', function(e){
        if(input.value === "") {
            label.classList.remove('is-active');
        }
    })

     label.is-active{
            color:red;
        }
 

    <div class="input-fields">
        <label class="fields-label">Last Name</label>
        <input type="text" class="input-text">
    </div>