Activating the CSS :active selector for elements other than anchor tags

How can I activate the :active state for non-anchor elements using JavaScript (jQuery)?

After reading through Section 5.11.3 of the W3C CSS2 specification in relation to the :hover pseudo selector in hopes of triggering the activation of an element, I stumbled upon the following information that suggested it might be achievable:

"The :active pseudo-class is applied while an element is being activated by the user. For instance, between the times the user presses the mouse button and releases it."

"CSS doesn't specify which elements can be in the states mentioned above, or how they transition in and out of those states. Scripting is capable of altering whether elements respond to user events, and different devices and browsers might have varied methods of indicating or activating elements."

Appreciate any help with this matter!

javascriptjquerycss

Answer №1

It is not possible to activate a CSS pseudo selector like :active using JavaScript. There is no event or function that can trigger it, so even if you simulate a click on an element with a css :active pseudo selector applied (such as changing the background color to red), it will not have any effect.

Answer №2

While on a search for the same solution, I stumbled upon this question.

Essentially, I have a text area and a button. The button.click event is triggered when the user presses enter. However, the :active selector in CSS does not work as expected.

Here's the workaround I came up with, although it may seem a bit redundant.

In the CSS:

/* This is for actual clicks on the button */
.Button:active {
    position: relative;
    top: 5px;
}

/* This is for pressing enter instead of clicking the button */
.Button.activate {
    position: relative;
    top: 5px;
}

And then in jQuery:

// If enter is pressed, trigger button click
$("#textArea").keydown(function(event) {
    if (event.keyCode == 13) {
        $("#button").click();
        $("#button").addClass('activate');
    }
});

// If enter is released, remove the class
$("#textArea").keyup(function(event) {
    if (event.keyCode == 13) {
        $("#button").removeClass('activate');
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reiterating the text and determining the length of the string

Currently, the script is capable of calculating the width of the script based on user input and can also determine the width of a string. However, I am facing an issue when attempting to repeat a string entered by the user. For example, if the user input ...

jquerycss

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

Controlling international shortcuts for numerous npm packages

Within my root folder, I have 3 npm projects organized in a more complex structure than the following example (using webpack, JS frameworks, etc.), but for simplicity sake, here is the layout: root ├── root_index.js ├── package.json ├── p ...

javascriptnode.jsnpm

Error: excessive recursion detected in <div ng-view="" class="ng-scope">

I've recently started learning angularJS and I've encountered an error that I need help with. Below is my index.html file: <body ng-app="myApp"> <div ng-view></div> <a href="table">click</a> <script ...

javascriptangularjsangularjs-ng-route

Ensure that confirmation is only prompted in ASP.NET when necessary

I am faced with a scenario where I need to handle the value of Session["actionMode"] in conjunction with a button click event. Here is what I currently have implemented in my code: protected void Button1_Click(object sender, EventArgs e) { if ((int)S ...

javascriptasp.net

Retrieve the initial two HTML elements from a Markdown file that has been parsed using NodeJS

Let's say there is a Markdown file being parsed dynamically to generate something like the following output: <h1>hello</h1><p>sometext</p><img src="image.jpg"/><ul><li>one</li>two</li></ul> ...

javascriptnode.jssubstringmarkdown

Guarantee: exclude all successful and unsuccessful responses and only carry out the .finally method

I have a function named request: function request (endpoint) { return axios.request(endpoint).then(api.onSuccess).catch(api.onError) } api.onSuccess: onSuccess (response) { let breakChain = false ... adding some logic here ... return break ...

javascriptvue.jspromise

The JSON response is displaying [object object] instead of an array

I am currently facing an issue with my Sencha touch app where the json data I am feeding into it is not returning the image URLs as expected. Instead, it is showing me "[object Object]" when I console.log the "images" property. Here is a snippet of the js ...

phpjavascriptjsonsencha-touch

Handle Ajax requests to prevent multiple submissions upon clicking

Seeking a solution to avoid multiple requests when the user clicks on the login or register button. The code provided below is not functioning as expected; it works fine the first time but then returns false. $('#do-login').click(function(e) { ...

javascriptjqueryajax

Stop the parent script from executing

I recently encountered an issue with my DotNetNuke website. Embedded within the DNN code is a script that triggers a function called WebForm_OnSubmit(). However, I noticed that this function is also being triggered when I try to perform a search on a speci ...

javascriptjquerydotnetnuke

Strange behavior observed with Jquery Ajax

After spending countless days on this issue, I am still unable to figure out why it's not working. Can someone please take a look and assist me? index.php <form id = "update_status" method = "POST"> <textarea id="sha ...

phpjqueryajax

insert a new record into the database using AJAX

I'm currently working on a script that adds text/rows to the database using AJAX. In my script, I have included a checkbox with the id "main" and I want its value to be sent to the database as well. However, regardless of whether the checkbox is che ...

phpjqueryajax

Are you receiving a response code 500 when making a request to a presigned URL?

I've been encountering an issue with generating presigned URLs for files from my S3 bucket. Although I can successfully read files and obtain a list of file contents, when attempting to create a presigned URL using the following code snippet: reports ...

javascriptnode.jsamazon-web-servicesamazon-s3

What are the various jQuery methods that can be utilized in the object parameter of a jQuery element creation request?

According to a post by John Resig on his website at http://ejohn.org/apps/workshop/adv-talk/#3, it is mentioned that methods can be attached using the object parameter. While 'text' appears to function correctly, any other content in the object ...

javascriptjquerycreateelement

Tips for transferring data from a view dropdownlist to a controller in ASP.NET MVC without relying on a model class

Controller public ActionResult Isearch( string OFFICE_TYPE,string DEPARTMENT, string FILECATEGORY,string fromdate,string todate) { ViewBag.officetype = new SelectList(entity.TBL_OFFICETYPE.ToList(), "OFID", "OFFICE_TYPE"); ...

c#jqueryasp.net-mvc

finding the relative path based on a given URL

Struggling to extract a relative path from a URL. For example, from , I want to get /my/path. I attempted the following: url = 'http://test.com/my/path'; console.log(url.replace(/^(?:\/\/|[^\/]+)*/)); Unfortunately, I am only ...

javascriptregex

An effective way to eliminate or verify duplicate dates within an array in AngularJS1 is by employing the push() and indexOf() methods

I have successfully pulled EPOCH dates and converted them into strings, but my previous code did not check or remove duplicates. Does anyone have any suggestions on what I can add to accomplish this? The timestamp in this case is the EPOCH date that I re ...

javascriptangularjsduplicatesindexofepoch

What is the best way to change an object into a string in node.js?

Recently, I've delved into the world of node js and I'm eager to create a basic coap client and server using this technology. Successfully, I managed to set up a server hosting a text file, but now I aim to access it from the client. var coap = ...

javascriptnode.jsclient-server

Display Image After Uploading with AJAX

After spending nearly 3 hours working on implementing file uploads via AJAX, I have finally managed to get it up and running smoothly. Take a look at the code below: View <div class="form-horizontal"> <div class="form-group"> @Htm ...

javascriptjqueryajaxasp.net-mvc-5