Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible.

After following the advice provided in this query:

spellcheck=false on contentEditable elements

I implemented event listeners for the blur and focus events to switch between edit.spellcheck = false; and edit.spellcheck = true; in an attempt to prevent the appearance of red squiggle lines when the div is not in focus. Unfortunately, the issue persists despite these changes.

.edit {
  border: 1px solid gray;
}
<div class="edit" contenteditable="true"></div>

javascripthtmlcss

Answer №1

It is my understanding that consistently removing red squiggly lines under spelling errors in editable elements, such as form fields, may not be possible on all browsers and platforms even if the spellcheck attribute is set to "false".

One workaround to consider is removing the red squiggles by making the element non-editable when it is no longer focused. You can utilize this method by toggling the contenteditable attribute to true when the element is clicked (focused) and false when it is blurred:

const edit = document.querySelector('.edit');

edit.addEventListener('click', function() {
  
  /* Make content editable when clicked */
  edit.setAttribute('contenteditable', true);
});

edit.addEventListener('blur', function() {

  /* Remove content editable when blurred to ensure spelling lines disappear */
  edit.setAttribute('contenteditable', false);
});
.edit {
  border: 1px solid gray;
}
<div class="edit">som seplling erors</div>

I hope this information proves useful to you!

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

Styling images and text in CSS within a jQuery UI autocomplete widget

I am currently using an autocomplete widget that displays text along with images. The results I have right now are not meeting my requirements. I want to customize the appearance of my results so that the words 'test' and either 'Federico&a ...

javascripthtmlcssjquery-ui

What is the best method for modifying an XML document without altering its associated XSL stylesheet?

I am working with XML data retrieved from a URL: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/style.xsl"?> ....etc... To display the data in HTML format, I added the second line referencing the style.xsl file ...

cssxmlxslt

Choose a subclass within a superclass by utilizing the "this" keyword

Whenever a user clicks on the class addMass, I want to add the attribute data-rate to the element with the class currentMass. Since there can be multiple elements with the class addToCart, I need to ensure that the changes are only applied to the one that ...

javascriptjquerythis

The CSS3 transition is not functioning correctly when transitioning element dimensions from a percentage or auto value to a specific pixel

As part of my project, I am developing a single-page website that features a vector graphic occupying 80% of the screen width on the initial 'start screen'. Once the user scrolls down, the graphic smoothly transitions into a navigation bar positi ...

csscss-transitions

Experiencing difficulties when utilizing Jest to test components

I recently started working with Jest and JavaScript. I wrote a test for one of my components, but it's failing, and I'm struggling to figure out what's wrong (seems like something related to enzyme). Here is the output: ● Console co ...

javascriptreactjsunit-testingjestjsenzyme

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

javascripthtmld3.jssvg

What is the reason for sending a single file to the server?

A function called "import File" was developed to send multiple files to the server, but only one file is being received. Input: <input type="files" id="files" name="files" multiple onChange={ (e) => this.importFile(e.target.files) } ...

javascriptreactjstypescript

Obtaining a result from a jQuery Ajax call

I am exploring the use of JavaScript in an object-oriented style, and have a method that requires making a remote call to retrieve data for a webpage to function properly. To achieve this, I have created a JavaScript class to handle data retrieval in order ...

javascriptjqueryajax

Unusual Happenings with jQuery Draggable

Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue. When I drag the letter H towards the right and it gets near the letters E, L, L, or O, ...

jqueryhtmlcssdraggable

Node.js web server operating on port 3000 is running a script

I have developed a Node.js script that extracts data from a database and saves it in a file. Additionally, I have set up a Node.js web server listening on port 3000 using forever to keep it running constantly. However, the script currently lacks a web inte ...

javascriptnode.jsscriptingwebserver

Converting xpath location to pixels: A step-by-step guide

Is there a way to convert an Xpath location or an element ID into pixel coordinates (X,Y) using Java? I have searched extensively but have not been able to find a clear and simple answer. ...

javahtmlseleniumxpathselenium-webdriver

Error Encountered - Configuring Node.js Deployment on the Heroku Platform

"APPLICATION ERROR - Oops! Looks like something went wrong with the application and we couldn't load your page. Please give it another shot in a little while. If you are the app owner, make sure to review your logs for more information." Hey there - ...

javascriptnode.jsheroku

Incorporating a Streamlit Application into an Established React.js Project via an iFrame

I am in the process of incorporating a Streamlit app into my existing React.js application to take advantage of its data analysis and visualization features. Can this integration be accomplished using an iFrame? Has anyone successfully embedded a Streamlit ...

javascriptpythonreactjsiframestreamlit

Tips for invoking a PHP function with jquery

I'm facing a bit of an issue with my code. I have a button that, when clicked, should execute a PHP function defined in the same file. Although the "clicked" alert appears upon clicking the button, I'm not getting any response from the function. ...

javascriptphpjqueryajax

Enable access to the child of Lages and apply CSS to disable it

My current code looks something like this: <label for="billing:postcode" class="required"><em>*</em>Zip/Postal Code</label> I am looking to hide the <em> element from displaying using CSS. How can I achieve this with the dis ...

htmlcssparent-child

The Dialog feature offered by jQuery-UI

Having just started with jQuery, I am looking to implement the jQuery-UI Dialog to display a message containing lengthy text to the user. My goal is to have a "More details" link in each row of my HTML table that will trigger the jQuery Dialog window to op ...

javascriptjquery

After restarting, Nuxt 3 runtime configuration values do not get updated with environment variables

Encountered a challenge with updating variables in runtimeConfig that rely on environment variables. When the application is built with values from the .env file like: API_URL=localhost:3000 The console displays localhost:3000. However, upon stopping th ...

javascriptvue.jsenvironment-variablesnuxt3runtime-configuration

Creating a JSX syntax for a simulated component and ensuring it is fully typed with TypeScript

Looking for some innovative ideas on how to approach this challenge. I have a test helper utils with added types: import { jest } from '@jest/globals' import React from 'react' // https://learn.reactnativeschool.com/courses/781007/lect ...

javascriptreactjstypescriptreact-nativejestjs

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

Retrieve storage information when an internet connection is unavailable on React Native

One of my recent projects involves creating an application that retrieves data from a URL in the form of an array of objects and then displays this data using FlatList. Upon launching the application, the data is displayed correctly since it's retriev ...

javascriptandroidiosreactjsreact-native