Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with:

<div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div>
<a class='bold' style="height:10px;width:10px;">B</a> 

$(function(){
    $("a.bold").on("click",function(){
        document.execCommand('bold',false,true);
    }) 
})

After clicking on the B link, the text in the contenteditable div did not become bold. You can view the jsfiddle example here: http://jsfiddle.net/JeremyHuang_Stern/487YF/

However, when using a button instead of a link to achieve the same effect, the issue was resolved. Here's the fiddle demonstrating this: http://jsfiddle.net/JeremyHuang_Stern/2QG26/

What could be causing this discrepancy?

Answer №1

To prevent the link from stealing text selection on mousedown, you can stop the default behavior.

$('a.bold').on('mousedown', function(event) {
    event.preventDefault();
    document.execCommand('bold', false, false);
});

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

What is the best way to implement material theme colors into my Angular2 CSS?

Suppose I want to utilize the mat-primary color as a background for a div using a CSS/SASS class, how should I reference it? My initial thought was: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; .my-class{ background-colo ...

Node is not functioning properly with Discord.js as expected

Having some trouble catching errors in my code. I'm seeing a red line and an expression expected error behind the period after the catch command. Any suggestions? client.on('message', message => { let args = message.content.subs ...

"Responding to an Ajax request with a .NET Core server by sending an xlsx

My web application exclusively supports .xlsx files. I have implemented a function in my controller that converts .xls files to .xlsx format successfully. When trying to open a .xls file, I send it via an Ajax request. However, the converted .xlsx file do ...

Is there a way to create a discord.js bot that can search for past messages without the need for a json file or storing them in a database?

Similar to the search feature in Discord. Imagine being able to enter !search [user] [query] and getting a response like "50 messages match your query." This would be like a word counting bot that doesn't need a database or local storage.The bot ...

Challenges with synchronizing Highcharts horizontally

I have been working on implementing synchronized charts in my application by using the example code provided by Highcharts here. My layout consists of columns created with the Materialize framework, and I placed the charts side by side in a row. However, I ...

PHP Error: Function call to member unsuccessful

I'm currently experimenting with a tutorial that explains how to populate a Select2 drop down using data from a MySQL Database: Below is the PHP script I've slightly modified for this task: <?php // setting up the database connection ...

Integrate NodeJs into Ionic framework for enhanced functionality and dynamic

I created a hybrid application using Ionic framework. Currently, I have been using PHP and MySQL as the backend technology. However, after doing some research, I realized that Node.js with Express.js and MongoDB are considered more modern options. Most ...

Resizing webpages for mobile devices results in misaligned rows

I'm currently using Bootstrap on a website and encountering issues with the responsiveness of rows on mobile devices. The desired outcome is for rows to be divided into 4 equal sections per row on larger screens, then scale down to 2 equal sections p ...

A guide on updating the value of a two-dimensional array using the useState() hook

Take a look at this Codesandbox example demonstrating my issue. Experiment by typing some words into both text areas to observe the problem. I have just started learning React. My goal is to dynamically generate an svg element based on user input. I am br ...

In bootstrap 3.0, columns are arranged in a vertical stack only

As a newcomer to web design, I've been struggling to figure out why my basic grid in Bootstrap 3 isn't working as expected. No matter what I try, my columns stack vertically instead of side by side and always resize to fill the browser window. Th ...

Using JavaScript and jQuery to calculate the time difference between two values

Here is a code snippet for calculating the difference between two numbers: function calculateDifference(num1, num2) { if (num1 > num2) { return num1 - num2; } else { return num2 - num1; } } On document.ready event: var result = calculateD ...

Utilizing the 'container' property in a React.js React-Bootstrap modal

How can I open a modal within a designated container using the native property "container"? Whenever I specify the class name of the container element, I encounter an error TypeError: Cannot use 'in' operator to search for 'current' in ...

Determine the associated value for a given key within a TypeScript object

I have a structure like this: type newsItem = { img: string; slug: newsSlug; text: newsText; }; derived from an enum like this: export const newsEnum = { interesting: "Interesting", regions: "Regions", contradictory: " ...

How can Angular hide a global component when a particular route is accessed?

Is it possible to hide a global component in Angular when a specific route is opened? For instance, consider the following code: app.component.html <app-header></app-header> <app-banner></app-banner> <!-- Global Component I w ...

Modify the value within vc-date-picker > v-text-field by utilizing v-for

I need the value :value to automatically update from inputValue.start to inputValue.end. This means that when I click on the end date, it should be reflected in the second text field. Similarly, if I select a date range in the second text field, the first ...

JS selection-dropbox

As someone who is relatively new to JS, I am struggling a bit. The goal of the code is to display items with specific content (ALL, A, B, C). While the code works fine with buttons, I can't seem to get it to work with a 'Dropdown-select', ...

The alignment of the text seem to be malfunctioning

The text-align:center property isn't working as expected. Can someone please assist me in figuring out why it's not functioning correctly? Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title>Wheat and ...

Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code ...

"Is there a way to retain the value of a variable outside of an ajax success

I've been working on some form validation functions and here's what I've come up with: <script> $(document).ready(function() { var dataObject = {}; $('#username').keyup(function () { id = $(this).attr('id'); ...

Select the text inside the current cell of a jqGrid table

The issue at hand is that when using jqGrid with cellEdit:true, users are unable to select text in a cell. Once the mouse button is released, the selection resets. This limitation prevents users from copying the selected text within cells. Has anyone enco ...