When you click on links and buttons, a focus outline appears

I am currently troubleshooting an issue within an existing application that relies on the use of jQuery. The problem arises when I click on any link or button on the page, causing the element to display a focus outline (such as a blue glow in browsers like Chrome and Safari), indicating that it has gained focus. I need to remove this outline after the click event. This behavior does not seem to be default, as I have not encountered it on other websites or even on a basic HTML page with only one link.

I am unable to simply use outline:none as a solution, since the focus outline must still be visible when using the tab key to navigate. I have attempted to use document.activeElement.blur() and $(element).blur() without success, likely due to some event handlers utilizing event.stopPropagation() where I can't easily modify the code for each one.

If anyone has insights or suggestions on how to address this issue, I would greatly appreciate your assistance. What might be causing links to maintain focus after being clicked? It does not appear to be a deliberate action within the code, given that it occurs on every link, button, and even some li elements. Thank you for your support in resolving this matter.

javascriptjqueryhtmlcssfocus

Answer №1

It appears that Chrome and Safari have the same default behavior.

You can test this by going to and clicking on the Email address and password field. The same issue may occur. I could be mistaken, but this seems to be the case.

Answer №2

To remove the outline, simply include outline:none;

To apply focus or blur to an element, use the class .outlineborder

.outline{
  outline:inherit !important;
}

$('.button').on('blur').... $(this).addClass('outline');

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

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...

htmlcss

Unresolved promise rejection on Repl.it

I decided to add a basic leaderboard feature to my game on Repl.it, so I set up a node.js backend for it. Here's the code snippet for the backend: const express = require('express'); const Client = require('@replit/database'); cons ...

javascriptnode.jsexpresspromisereplit

Displaying images with text below on the navigation bar, complemented by a sleek dividing line

I have a design in mind where I want to display 3 images at the top of a navbar, followed by centered text directly underneath each image. The spacing of the images seems to be even, but I'm not sure if this is just a coincidence or if I need to speci ...

htmlcssnavbar

PHP throws an error of "Undefined property: stdClass" when attempting to upload an image's path

I am currently uploading the description, number, and the image path using PHP database. However, I am encountering an error when attempting to retrieve the image from the controller. The error message reads: "Undefined property: stdClass::$imgPath .... o ...

phphtmlangularjs

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

jquerycssinternet-explorer

When rendering inside *.map in React, the first object of the array may not be rendered

When the SearchCard component is being rendered, it seems to be skipping the first object in the array- const cardArrayTrackSearch = this.state.searchtrack.map((user, i) => { return ( <SearchCard key={i} reload={th ...

javascriptarraysreactjscomponents

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I have designed a menu-header section for my website, inspired by this image. I created a fiddle to showcase it. However, I am facing an issue where the dropdown elements for "PROGRAMS" and "WORLD OF NORTHMAN" should start from the border of the header ins ...

javascriptjqueryhtmlcss

AngularJS text markers

In order to streamline the process of managing tags with random content, I have devised a 'tag' manipulation system using the angular-ui alert mechanism. The system includes a factory and a directive as follows: Factory: app.factory( &a ...

javascriptangularjstwitter-bootstrap-3angular-ui

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

javascriptjqueryhtmlajax

Error 400 encountered when trying to access National Weather Service data

Encountering a 400 error when making a simple NWS GET request for a point JSON dataset. The issue seems to be with the jQuery process, which is adding extra text after the longitude value in the URL - https://api.weather.gov/points/39.5,-105.5?_=16303483 ...

jqueryjsonajax

Send the user to a specified destination

Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...

javascriptphphtmlweb

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

javascripthtmlajaxformsajaxform

Codeigniter dilemma: Unable to upload images using Summernote

Summernote has been successfully integrated into my website (which is built using Codeigniter). Text editing functions work perfectly fine, however, I'm facing an issue with image uploads. When uploading images, Summernote reads them as base64. This ...

javascriptphpjquerycodeignitersummernote

Angular 6+ has a revolutionary theme service that seamlessly impacts all components as well as modals using the <ng-template let-modal>

As per the post How to toggle a class using a button from the header component in Angular 6+ I implemented a theme service which successfully toggles the 'dark-mode' class in the app.component.html. However, I encountered an issue where all my m ...

htmlangularservicesassthemes

Using jQuery to Check Cookies and Hide Content Depending on the Value and Data Attributes

On a webpage, I have a collection of coupons with unique data attributes (data-coupon). Currently, I am using cookies to store the value associated with each coupon (ranging from 1 to 4). While my code is functional, it feels repetitive and cumbersome. S ...

javascriptjquerycookies

Exploring the art of JSON interpretation within Highcharts

Below is an example snippet that utilizes static data: Highcharts.chart("container", { title: { text: "Highcharts pie chart" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Ju ...

javascripthtmlcssjsonhighcharts

Steps for displaying a div when clicking a link in the navigation

Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly.... Objective The goal is to have a navigation bar where each item, when clicked on, will display a div with content ...

htmlcssnavigationhover

Issues with PHP not retrieving selected radio button values

Currently, I am using a PHP webpage to generate a list of all files with a .264 extension in a specific folder. Once the file is selected, it is then sent to a command for video playback on a display connected to the computer. I have encountered some diff ...

phphtmlforms

Relocating JavaScript scripts to an external file on a webpage served by Node.js' Express

When using Express, I have a route that returns an HTML page like so: app.get('/', function(req, res){ return res.sendFile(path.resolve(__dirname + '/views/index.html')); }); This index.html file contains multiple scripts within t ...

javascriptnode.jsexpress

Struggling with PHP variables and AJAX JavaScript

Hey everyone, I've made some edits and have a new question regarding a similar issue. On test.php in my Apache server, I have a PHP script that connects to a database and retrieves data from a table. <?php $con = mysqli_connect("localhost", "user" ...

javascriptphpjqueryajax