What are the reasons that execCommand does not function correctly when attempting to justify text?

Why isn't justify with execCommand working properly? Take a look at the code below:

$('#JustifyLeft').click(function(){
    document.execCommand("JustifyLeft", false, "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Select the entire text and click the button</p>
<div class="editable" contenteditable="TRUE" style="font-size: 27px; text-align: center;">
  
<span style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi<span style="font-size: 35px;">I</span>am<span style="font-size: 18px;">Blah Blah</span>Ok</span>
</div>

<input type="button" id="JustifyLeft" value="Align Left">

After selecting the whole text and justifying it, you will notice that the underlines only remain on <text> nodes and <span> nodes do not have text-decoration.

Could this be a bug? Is there a way to fix it?

javascriptjquerycssexeccommand

Answer №1

When examining the element structure in the developer tool, you will notice that execCommand adds a closing </span> after Hi, am, and Ok, and wraps them with a <div> as shown below:

    <div style="text-align: left;">
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Hi</span>
    <span style="font-style: italic; font-weight: bold; font-size: 35px;">I</span>
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">am</span>
    <span style="font-style: italic; font-weight: bold; font-size: 18px;">Blah Blah</span>
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Ok</span>
    </div>

To correct this, you simply need to change the first <span> to <div> like this:

<div style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi
<span style="font-size: 35px;">I</span>am
<span style="font-size: 18px;">Blah Blah</span>Ok
</div>

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

Populate an ASP Form using Javascript in Android Studio

Being relatively new to Android studio, I have been experimenting with various methods but now need some assistance. I am looking to input data into an ASP.NET Website-form using Android studio. The traditional JavaScript approach does not seem to be effec ...

javascriptjavaandroidasp.netandroid-studio

A mistake occured: Unable to modify the stack property of [object Object], as it only has a getter method

Encountering an error when attempting to use a service in my component and declaring it in the constructor - TypeError: Cannot set property stack of [object Object] which has only a getter This is the code snippet: import { Component } from '@angula ...

javascriptangularangular-services

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

cssnext.jstailwind-cssshadcnui

Having trouble with importing a variable in an Express application? You may encounter this error message: "Route.get() must

When trying to import requireSignin from the controllers/auth.js file into the routes/user.js file and adding it to the router.get('/user/:id', requireSignin, read); route, an error occurs: Error: Route.get() requires a callback function but r ...

javascriptnode.jsexpressexpress-jwt

Why does the col-sm-* class affect the appearance on extra small screens?

For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. Howeve ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

There seems to be a problem with the Chart property getter as it

I'm in the process of creating an object that corresponds to chartJS's line-chart model <line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"></line-chart> There is an API I utilize which returns a standard arra ...

javascriptchartsvue.js

When using props.onChange(e.target.value) in a textField component in Material UI, it unexpectedly returns an object instead of a value

function FormInput(props) { const classes = formInputStyles(); return ( <div> <TextField onChange={(e) => props.onChange(e.target.value)} InputProps={{ classes, disableUnderline: true }} {...pro ...

javascriptreactjsmaterial-ui

When the 'keyup' event is detected, trigger the function only on keyup

Looking for assistance in setting this to only trigger on keyup events. Can anyone provide guidance? $(function() { $('#acf-field_5a32085c7df98-field_5a3208f87df99').on('keyup', function() { $('#link-headline-fb').text($( ...

javascriptjquerykeyuponkeyup

How about "Incorporate Google Auth into your Vue.js project with modular

I'm on the search for a project that showcases using Vue.js and the Google client library to authenticate with JavaScript, but without the need for transpilers, bundlers, or Node/npm. Does anyone know of such an example out there? I simply want to cre ...

javascriptgoogle-chromevue.jsgoogle-oauth

Stopping $interval using promise after a specific condition is satisfied using Angular timer

I'm struggling to figure out why my $interval service isn't canceling properly. It seems like something important is missing. In my code, I've set up a counter that's tied to a counting property: $scope.sessionCounter $scope.sessionC ...

javascriptangularjssetinterval

What is the process of encrypting a password using AngularJS on the client side, transferring it securely to the server through ExpressJS, and then decrypting it on the server

Looking for a simple method to encrypt a password on the client side using angular.js, send it to the server with express.js, and then decrypt it? While there are libraries like angular-bcrypt and similar ones in nodeJS, they may not be suitable as they ma ...

javascriptangularjsnode.jsexpressencryption

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

javascripthtml

tips for replacing multiple route parameters in Angular using the replace function

I am facing an issue when trying to replace multiple parameters using the angular replace function. The problem is that the function only detects the first parameter. For example, if I have this route admin/management/{type}/card/{id}, and use the route.r ...

javascriptangular

Organize information in a React table following a predetermined sequence, not based on alphabetical order

As a beginner with React, I'm looking to sort my data by the column "Status" in a specific order (B, A, C) and vice versa, not alphabetically. The data structure looks like this: export interface Delivery { id: number; name: string; amount: num ...

javascriptreactjstypescripthtml-table

What is the process for converting an array of objects into an array of form groups?

I am looking to utilize the array function of the formbuilder to handle formcontrol arrays. I have a custom object array that I need to integrate into a FormArray, but it seems to only accept FormGroup as arguments. How can I convert my array of custom obj ...

javascriptangular

How can I resize and horizontally align an image using html/css?

Is it possible to resize, crop and center an image using only HTML/CSS? (Using the img tag or CSS sprite) For instance, if I have a 500x500 pixel image, I would like to resize it to a 250x250 pixel image To make the actual visible image 100x100 pixe ...

javascriptjqueryhtmlcss

Invoke a function within the redux reducer

The code within my reducer is structured as follows: import {ADD_FILTER, REMOVE_FILTER} from "../../../../actions/types"; const removeFilter = (state, name) => { return state.filter(f => f.name !== name); }; export default function addRemoveFi ...

javascriptreactjsreduxreact-redux

Using TypeScript with React: Initializing State in the Constructor

Within my TypeScript React App, I have a long form that needs to dynamically hide/show or enable/disable elements based on the value of the status. export interface IState { Status: string; DisableBasicForm: boolean; DisableFeedbackCtrl: boolean; ...

javascripttypescriptspfx

Exploring the Significance of jQuery in a Real-

I manage a large website with an extensive amount of jQuery code spread across multiple pages. The total codebase is around 1000 lines, well-optimized and excluding plugins. Despite jQuery being efficient in ignoring listeners for non-existent page elemen ...

javascriptjquerylong-integer

How can I troubleshoot a 403 Forbidden error in Django that occurs when making a POST request using AJAX?

When using Django Console, a red error message popped up with the following log: [16/Jan/2015 01:33:34] "POST /accounts/benjamin/listview HTTP/1.1" 404 7562 Switching over to Chrome Dev Console revealed a different issue: jquery-2.1.1.min.js:4 POST http ...

jqueryajaxdjango