how to make make conteneditable div do tab spacing when i hit tab key

Question

I tried to make this conteneditable div do tab spacing when i hit tab key but it does'n work. i hope someone have solutions for this problem. you can add id or class or anything you need to make it works. thanks

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>

Add a keyboard event listener (`keydown` / `keyup`). Whenever the Tab key is pressed check if the contenteditable div is focussed. If it is add multiple spaces to your div's `textContent`. — Emiel Zuurbier, Aug 03 '21 at 07:29

score 0 · Answer 1 · answered Aug 03 '21 at 08:34

you can create keydown event

i've seen a function to place the caret the end of the text whenever the the tab key is press. this runs on multiple browsers

check it out : 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>

you could upvote or mark answer if this solves your issue. Thank you — Stacks Queue, Aug 03 '21 at 08:46

לבני מלכה · Answer 2 · 2021-08-03T07:55:54.477

-1

use code as below

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>

edited Aug 03 '21 at 07:55

answered Aug 03 '21 at 07:38

לבני מלכה

15,925
2
23
47

Still not working bro. i am using chrome latest version. – Just ED Aug 03 '21 at 07:44
Note: [keypress](https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event) is now deprecated. (was in answer pre-edit) – freedomn-m Aug 03 '21 at 07:57
1

@לבנימלכה can you check your snippet before posting? Your code adds a space at the end and moves the input caret - this is not "*do tab spacing*" as in the question (it *is* how to identify the tab key) – freedomn-m Aug 03 '21 at 07:59
@לבנימלכה: that was exactly what I mean. But, space and the wrong caret position are fine. Thanks for helping me. I have 50% answer. I'll take care of the rest. – Just ED Aug 03 '21 at 08:12
here is solution: https://stackoverflow.com/questions/6249095 – לבני מלכה Aug 03 '21 at 08:14

how to make make conteneditable div do tab spacing when i hit tab key

2 Answers2