Contenteditable feature dynamically styling text upon input

Is it possible to prevent CSS properties like text-transform from affecting text entered via contenteditable?

On my webpage, "CERTIFICATE PROGRAM" is shown in uppercase due to text-transform settings. However, the original input was: Certificate Program.

Whenever I add text using the contenteditable feature, it automatically becomes uppercase.

Applying a CSS rule of text-transform:none; to contenteditable does not solve the issue as it displays the text as: Certificate Program instead of "CERTIFICATE PROGRAM".

Is there a way to apply CSS styles for display purposes only and not change newly entered text?

Current situation: TEXT: CERTIFICATE PROGRAMS, HTML:

<section id="name+degree+96" contenteditable="true">Certificate PrograMS</section>

Desired outcome: TEXT: CERTIFICATE PROGRAMS, HTML:

<section id="name+degree+96" contenteditable="true">Certificate Programs</section>
jquerycsshtml

Answer №1

By viewing the example here, you can see that the original text remains unaffected by the text-transform property, as it only alters the visual appearance of the text (modify the text and then click elsewhere).

The question's clarity is not entirely evident, but...

If your goal is to eliminate uppercase text within a specific section, you can simply override it with:

section[contenteditable] {
   text-transform: none;
}

If you wish to remove the uppercase styling while editing the text:

section[contenteditable]:focus {
  text-transform: none;
}

Answer №2

To completely replace the previous css rule, use the following code:

section[contenteditable] {
   text-transform: none;
}

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

the process of configuring date string for x-axis labels in chartjs

I recently created a time scale chart using chart.js. However, I now want to change the labels in my data array to be in the format of 01-02-2017, 02-06-2017 instead of "4 February 2017", "9 February 2017" and so on. Below is my code: var aR = null; va ...

phpjquerychart.js

Adding turbolinks to an HTML document can be achieved without the need for a

Recently delving into the world of turbolinks, I discovered that it can be employed independently without relying on a client-side javascript framework. Eager to test this out, I created a bootstrap 4 template and attempted to install it. Firstly, I downl ...

javascripthtmlnode.jsbootstrap-4turbolinks

The data from the Flickr API is consistently unchanging

I created a simple weather app that retrieves weather data using a "POST" request and displays it successfully. Users have the ability to search for weather by city, and I wanted to enhance the app by loading an image of that city through a separate jQuer ...

javascriptjqueryajaxapi

Having trouble capturing a photo from webcam using HTML5 and getUserMedia() in Google Chrome upon initial page load

Using the information from an article on HTML5Rocks, I am attempting to create a tool that can capture photos from a webcam. Here is an excerpt of my HTML code: <button type="button" name="btnCapture" id="btnCapture">Start camera</button>< ...

javascripthtmlhtml5-canvashtml5-videowebcam

Combine div elements with identical class

Is there a way to utilize jQuery in order to enclose groups of elements with the same class within a div? I have been searching for a solution, but haven't found one yet. Here's an example of the HTML: <div class="view-content"> < ...

javascriptjqueryhtmlclasswrapall

Removing all table rows except one in Jquery

I currently have this code in my view: <script> $(document).ready(function() { $("#add_instruction").click(function(){ $("#instructions").append("<tr><td></td><td><input type='text' name='rec ...

javascriptjqueryhtml

Unable to align a 1px element with the primary border

Can you please assist me? I would like to modify the CSS markup below in order to remove the 1 pixel added extra on the active clicked tab from my UL LI Tabbed Menu. How can this be achieved? Here is a picture of the issue: HTML Markup: <div class=" ...

htmlcss

Navigating through Expression Engine and utilizing conditional statements

Would greatly appreciate some assistance with this issue. I am working on an Expression Engine website and encountering difficulties with simple conditionals for navigation active states. Despite having a color state designated within the styles, there s ...

cssnavigationexpressionengineconditional-statements

Resolving the Table Issue with 'onclick' in Javascript

Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

javascripthtmlcss

Locate an element by its TEXT using SeleniumBase

When using SeleniumBase, I have a requirement to click on an element that is identified as shown below: <span class="text"> Contato PF e PJ </span> The specific text inside the element (Contato PF e PJ) needs to be ...

htmlseleniumseleniumbase

What is the best way to calculate the time elapsed between two consecutive double clicks using jQuery?

I am trying to calculate the time difference between two clicks on a single button. Here is my code snippet: <a href="#">click here</a> My current JavaScript code to capture the time of each click is as follows: var clickedTime = '&apos ...

javascriptjqueryhtmlclickdouble-click

The mobile display does not support scrolling in Material-UI Drawer

I recently implemented the React Material UI library and integrated the Drawer component as a side-bar menu in my project. However, I encountered an issue where the Drawer component does not support scrolling on mobile devices. You can check out the websi ...

cssreactjsmaterial-designmaterial-ui

Python Selenium cannot locate button within an iframe

click here for imageI am trying to interact with the "바카라 멀티플레이" button located at the center of the website. Even after switching into an iframe, I am unable to detect the button. How can I achieve this? from selenium import webdriver im ...

pythoncssseleniumxpathiframe

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...

cssreactjstypescriptnext.js

Solving the jQuery Enigma: Why the If Statement Fails to Execute

I am struggling with implementing an if-loop inside my success function for AJAX in my project. The success function retrieves the response text from a python script, which can be either "SUCCESS" or "EMPTY". Although I receive the correct data and my aler ...

jqueryajax

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked? If I can't solve this issue, I might have to consider alternative solutions. input[type="checkbox"]{ width: 160px ...

htmlcssinputchecked

Sign in with AJAX in codeigniter framework

I am currently working on implementing AJAX functionality into my project. I aim to enable user login upon clicking the login button. Below, you will find the relevant code snippets. The view is invoking the login function in my controller. View <form ...

phpjqueryajaxcodeigniter

Steps to dynamically change the select options using Jquery after successfully receiving data through Ajax

Upon clicking the button, I see console output correctly; however, my options are not updating. I am a beginner in Ajax, Jquery, and Django and have spent over a week trying to resolve these issues with no success. Please assist me. This is my Django code ...

jquerydjangoajax

The magnifying glass icon is missing from the autocomplete search feature

After creating an autocomplete search functionality that queries my mysql database, I encountered a slight issue. Here is the code snippet showcasing my implementation: <div class="search-bar"> <div class="ui-widget"> <input id="ski ...

javascriptphpjquerymysqlautocomplete

transform the usage of jquery.submit into ajax submit

I'm having trouble figuring out how to submit a form using Ajax from the jquery ui button function. This is my code for submitting the form in a traditional way $('#contact-form').dialog({ modal: true, autoO ...

jqueryasp.net-mvcajax