How can you assign a class to an id in css or javascript?

Tags: javascript,html,css

Problem :

Right now, every text box I make looks like this:

<input type="text" class="disableHotkeys">

Elsewhere, I have code that disables hot keys whenever an element of class "disableHotkeys" is focused on, and enables when all are blurred.

This all works fine, but I'd rather input elements were of class "disableHotkeys" by default as to clean up the code, and be less repetitive.

What I want is something like this:


//don't use this code
{  include .disableHotkeys;  }

Is there a way of doing this in the css?

If not, I imagine there is a way to add the class to everything with JQuery after page load, but it seems like bad form to set the class outside of the places developers would usually look (the html/php file, and maybe the css).

P.S. if you have a better title, it would be appreciated

Solution :

Unfortunately, with CSS only, you're not able to do it. You need to use JS. I am giving you a jQuery example -




And also if you need to add class to all input then why dont put disableHotkeys class code to input?

    CSS Howto..

    How to have text slide in when I hover over navbar?

    How to do aspect to fill in img tag?

    how to do jquery once fade out has finished?

    How to prioritize a CSS class?

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    How to align a menu bar using css and html? [closed]

    How to enqueue second stylesheet in Wordpress child theme?

    How to keep the navbar fixed to top in big screens only using jquery

    How do I draw a line in CSS that starts wide and ends in a point [duplicate]

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to Make 4 cells in each line by only css & html

    How to find out if an element is in a fixed positioned container?

    How to assign CSS to images which have specific extension, height and width?

    how to trigger a css animation after certain pixels of scroll

    How to set two values for one css property?

    CSS - How to avoid element content to be displayed on 2 lines

    How to stretch div height to fill parent div - CSS

    Bootstrap tooltip showing behind modal window

    How do I set two values for IE's `filter` property?

    Yii2 how to include multiple css files from specific view or controller action

    How can a URL fragment affect a CSS layout?

    How to load CSS for different URL in spring MVC app

    How to use CSS sprites within a responsive design

    How to implement this logic in CSS?

    How to property adjust table?

    How does CSS float work when applied to an “ul” element

    How to apply Javascript conditionally on a specific css-class only?

    How can I use CSS to create a middle column that fills the height of the page?

    How to remove border for last column in css?

    How do I get form-groups to overlap?