Learn how to make a contenteditable div perform tab spacing with a simple keystroke of the tab key

Question

Learn how to make a contenteditable div perform tab spacing with a simple keystroke of the tab key

I've been trying to figure out how to make this contenteditable div add tab spacing when I press the tab key, but so far no luck. If anyone has a solution for this issue, please feel free to share. You can use an ID, class, or any other method to get it working. Thank you.

div[contenteditable]{
                display:inline-block;
                font-family:lucida console;
                font-size:12px;
                line-height:14px;
                white-space: pre;
                padding:5px;
                margin:0;
                min-width:200px;
                min-height:50px;
                height:auto;
                background:#fff;
                border:1px solid #000;
            }

<div contenteditable="true">dwdw wdw</div>

javascript html jquery css

Answer 1

Answer №1

You have the ability to trigger a keydown event

I came across a function that positions the caret at the end of the text when the tab key is pressed. This functionality works seamlessly on various browsers.

For more details, take a look at this resource: contenteditable, set caret at the end of the text (cross-browser)

$('#test').on( 'keydown', function( e ) {
    if( e.which == 9 ) {
        e.preventDefault();
        $(this).html($(this).html() + "   ") 
        placeCaretAtEnd( document.querySelector('#test') );
    }
} );


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

div[contenteditable]{
  display:inline-block;
  font-family:lucida console;
  font-size:12px;
  line-height:14px;
  white-space: pre;
  padding:5px;
  margin:0;
  min-width:200px;
  min-height:50px;
  height:auto;
  background:#fff;
  border:1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="test">asdfsadf</div>

Answer 2

You have the ability to trigger a keydown event

I came across a function that positions the caret at the end of the text when the tab key is pressed. This functionality works seamlessly on various browsers.

For more details, take a look at this resource: contenteditable, set caret at the end of the text (cross-browser)

$('#test').on( 'keydown', function( e ) {
    if( e.which == 9 ) {
        e.preventDefault();
        $(this).html($(this).html() + "   ") 
        placeCaretAtEnd( document.querySelector('#test') );
    }
} );


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

div[contenteditable]{
  display:inline-block;
  font-family:lucida console;
  font-size:12px;
  line-height:14px;
  white-space: pre;
  padding:5px;
  margin:0;
  min-width:200px;
  min-height:50px;
  height:auto;
  background:#fff;
  border:1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="test">asdfsadf</div>

Answer 3

Answer №2

Here is the code snippet for your reference

function keypress(ev){
 if(ev.keyCode==9){
   ev.target.innerHTML+=" " ;
   ev.preventDefault();
  }
}

div[contenteditable]{
  display:inline-block;
  font-family:lucida console;
  font-size:12px;
  line-height:14px;
  white-space: pre;
  padding:5px;
  margin:0;
  min-width:200px;
  min-height:50px;
  height:auto;
  background:#fff;
  border:1px solid #000;
}

<div contenteditable="true" onkeydown="keypress(event)">dwdw wdw</div>

Answer 4

Here is the code snippet for your reference

function keypress(ev){
 if(ev.keyCode==9){
   ev.target.innerHTML+=" " ;
   ev.preventDefault();
  }
}

div[contenteditable]{
  display:inline-block;
  font-family:lucida console;
  font-size:12px;
  line-height:14px;
  white-space: pre;
  padding:5px;
  margin:0;
  min-width:200px;
  min-height:50px;
  height:auto;
  background:#fff;
  border:1px solid #000;
}

<div contenteditable="true" onkeydown="keypress(event)">dwdw wdw</div>

Learn how to make a contenteditable div perform tab spacing with a simple keystroke of the tab key

Answer №1

Answer №2

Similar questions

Encountered a problem with AngularUniversal prerendering: UnhandledPromiseRejectionWarning: Unable to locate NgModule metadata for 'class{}'

What could be the reason for my CSS selector with :target not functioning properly?

Generating a JavaScript variable linked to a Rails Active Record relationship

Having trouble locating the search bar element on Walmart's website?

programming issue: unable to resolve

Creating a sticky menu in a column using affix with a CSS bootstrap list-group

Trouble with Next.js App Router OG Image not appearing after deployment

Finding the Determinant of a 4x4 Matrix: A Ray-Tracing Adventure in JavaScript

The Jquery ajax page is redirecting automatically when a post request is made

Ensure that the "select" dropdown menu remains a constant size

Issue with Three.js: The mouse hover effect does not revert back to the previous color

Fetching information from a data object using asyncData in Nuxt

A guide to generating numerous SVG paths using a JavaScript function

What is the best way to center the image on a page?

Is it possible to use the inheritance type for a function parameter derived from an object?

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Having issues with the CSS block in my Jekyll dropdown navbar

Can PHP and AJAX conflict and insert the same query twice?

Updating the global CSS styles that were inherited from the node_modules folder in a Next.js project

Responsive input form causes floating label to be positioned incorrectly