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!

Cjmarkham · Accepted Answer · 2015-01-03 03:56:17Z

8

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" />

edited Jan 3, 2015 at 3:56

answered Jan 3, 2015 at 3:27

Cjmarkham

9,7336 gold badges52 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Siniša Over a year ago

Did you mean: input.addEventListener?

Cjmarkham Over a year ago

I may have meant that :P

Siniša Over a year ago

Thanks. Both provided answers (the one below) give solution, but I can only accept one, and I've decided to go with yours since it avoids adding CSS in run-time to header.

TheScrappyDev Over a year ago

Unfortunately, this approach will not address the focus pseudo selector, but will instead update the background of the element when the focus event has been triggered. The only solution that will work here is @karthik's solution below, since it will allow selecting the focus pseudo selector.

Cjmarkham Over a year ago

Both question and answer are nearly 5 years old. Let it rest in peace. I'm sure OP has found a better solution or abandoned the project in these years :)

Karthik · Accepted Answer · 2015-01-03 04:00:37Z

5

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.

edited Jan 3, 2015 at 4:00

answered Jan 3, 2015 at 3:38

Karthik

1,3776 silver badges8 bronze badges

9 Comments

Siniša Over a year ago

Understood. However does this mean that it's set for all input fields that will be created? Is there a way to make style for each input field separately, in case there's need for different styling for each input field?

Karthik Over a year ago

you can change the css accordingly. you can go by element id or a class

Siniša Over a year ago

OK understood. Thanks. And when control is to be removed from UI, how can I remove it's style? So it won't pile up in the head.

Karthik Over a year ago

This approach helps you continue the typical dev cycle of writing html, scripts and css, where you update your css whenever the markup goes through the change. Since we don't have the luxury of CSS here, We could keep the JS code readable and maintenable as there is a separation in the styles and scripts. Infact you can put all the styles together in one file and have it included in the page.

Siniša Over a year ago

I agree that it's better to keep CSS and JS separated, but for this one client demands it all be in JS. Just to clarify, how can I then remove styleTag that is added to head using your approach, when control (input) is removed/disposed?

|

maxshuty · Accepted Answer · 2023-08-03 10:50:19Z

5

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);

edited Aug 3, 2023 at 10:50

answered Jan 2, 2022 at 15:59

maxshuty

10.9k13 gold badges71 silver badges87 bronze badges

3 Comments

Siniša Over a year ago

The only problem with this is browser support on China mobile devices, where WeChat internal browser (QQ) does not still supports it. So if you're developing for non-China market, is great solution to go for. But if you need it to work in WeChat internal browser (Android devices), need to be aware of this issue.

maxshuty Over a year ago

@Siniša this is true if you need to support extremely outdated browsers, but the question should also be asked of the business why you're still supporting these old browsers and how might you migrate users to more secure and modern browsers. caniuse.com/css-variables

Siniša Over a year ago

Wish that was possible. If you develop for China market, there's no option to say "we don't support WeChat". No business for you if you do that. WeChat is used by probably 80% of advertising market for pushing html based campaigns (eg. mini web games, gamified experiences etc). Until Tencent updates their QQ browser (used by WeChat as internal browser, as a replacement to Chromium they used years ago). will need to deal with issues like this.

JulienRioux · Accepted Answer · 2019-07-08 20:46:04Z

1

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 = "";
});

answered Jul 8, 2019 at 20:46

JulienRioux

3,1322 gold badges28 silver badges40 bronze badges

Comments

Friedrich -- Слава Україні · Accepted Answer · 2022-12-28 15:57:44Z

0

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"/>

answered Dec 28, 2022 at 15:57

Friedrich -- Слава Україні

3,9831 gold badge34 silver badges53 bronze badges

Comments

raj lanjewar · Accepted Answer · 2022-09-19 11:50:45Z

-1

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>

edited Sep 19, 2022 at 11:50

answered Sep 19, 2022 at 11:34

raj lanjewar

113 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to set input:focus style programatically using JavaScript

6 Answers 6

5 Comments

9 Comments

Use CSS Variables if possible

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

9 Comments

Use CSS Variables if possible

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related