The drawbacks of using ContentEditable in Firefox

Question

The drawbacks of using ContentEditable in Firefox

My current setup involves using a div element with the contenteditable attribute. On keypress, I have restricted editing to 15 characters. When the focus is lost, the div becomes uneditable. Below is the code snippet that I am working with:

<div id="test" contenteditable="{{isContentEditable}}" onkeypress="return (this.innerHTML.length <= 15)"
ng-blur="handleEditableBlur();" ng-keydown="handleKeydown($event)"> {{value}}                    
</div>
<span id="pencilIcon" class="fa fa-pencil" data-ng-click="handleEdit();" focus="test"></span>

After clicking the pencil icon, the contenteditable property is set to true. Once the text exceeds 15 characters, it becomes uneditable again. While this functionality works perfectly in Chrome, there seems to be an issue with Firefox.

javascript css angularjs html

Answer 1

Answer №1

Applying a clever workaround, I have modified certain keyboard keystrokes like tab, backspace, delete, etc., to bypass the logic and return false. Afterwards, you can track the number of characters entered.

To implement this in your div, make sure to include

onkeypress="return checkEntry(event)"

and add the JavaScript function provided below to your JS script.

function checkEntry(e){
  e = e || window.event;
  var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
  var keyShorts = $.inArray(keyCode,new Array(8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,123,144,145))>-1;
  if(keyShorts){
    return true;
  }else if(e.target.innerHTML.replace(/(<|&lt;)br\s*\/*(>|&gt;)|(&nbsp;)/igm,' ').length>=15){
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="width:300px;height:300px;border:1px solid #ccc;" contenteditable=true onkeypress="return checkEntry(event)"></div>

Feel free to utilize this solution for your needs. Cheers!

Answer 2

Applying a clever workaround, I have modified certain keyboard keystrokes like tab, backspace, delete, etc., to bypass the logic and return false. Afterwards, you can track the number of characters entered.

To implement this in your div, make sure to include

onkeypress="return checkEntry(event)"

and add the JavaScript function provided below to your JS script.

function checkEntry(e){
  e = e || window.event;
  var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
  var keyShorts = $.inArray(keyCode,new Array(8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,123,144,145))>-1;
  if(keyShorts){
    return true;
  }else if(e.target.innerHTML.replace(/(<|&lt;)br\s*\/*(>|&gt;)|(&nbsp;)/igm,' ').length>=15){
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="width:300px;height:300px;border:1px solid #ccc;" contenteditable=true onkeypress="return checkEntry(event)"></div>

Feel free to utilize this solution for your needs. Cheers!

The drawbacks of using ContentEditable in Firefox

Answer №1

Similar questions

Enhancing an image with zoom effect in a 2-column layout on hover

Notify the user with a message that our support is limited to Chrome, Firefox, and Edge browsers when utilizing Angular

In an HTML form, there are two fields to input registration number and full name. I need a script in JavaScript that automatically fills in the full name field when the corresponding registration number is entered

Is there a way to upload an image without utilizing or concealing the `<input type='file' />` element?

The presence of inline display causes gaps of white space

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

What is the best way to compare input to 2 distinct patterns in order to produce 2 separate error messages accordingly?

"Using jQuery to add emphasis to a table row and remove it again

Transition smoothly between images using CSS in a continuous loop

The relationship between columns in MySQL is determined by the values they hold

Issues arise when using jQuery's ajax() method with processData set to false, as it still adds form data to the URL, among

Handling the scope object within an Angular directive

Consistent column height across each row

Can importing a library generate a fresh copy of the imported library?

A fleeting moment reveals a broken image tag

Restrict the quantity of items retrieved from an AJAX response

Interacting with Rails controllers through AJAX to trigger a JavaScript function

I find it frustrating that Angular consistently redirects me to the login page every time I attempt to navigate to a different page

How can I show the initial three digits and last three digits when using ngFor loop in Angular?

What is the best way to give a fixed height to Card content in Material UI? Is CSS the way to go?