tab key works inside a textarea but doesn't inside a div-CodePudding

in the example below pls write something inside the textarea and press tab key
you'll see - it works
I modified its code to use it inside a contenteditable div - but it doesn't work
instead of tab - the textContent is duplicated
please help

$('.btex').on('keydown', function(e){
    if (e.keyCode === 9){
        var val = this.value;
        var start = this.selectionStart;
        var end = this.selectionEnd;
        this.value = val.substring(0, start)   '\t'   val.substring(end);
        this.selectionStart = this.selectionEnd = start   1;
        return false;
    }
});

$('.bdiv').on('keydown', function(e){
    if (e.keyCode === 9){
        var val = this.textContent;
        var start = this.selectionStart;
        var end = this.selectionEnd;
        this.textContent = val.substring(0, start)   '\t'   val.substring(end);
        this.selectionStart = this.selectionEnd = start   1;
        return false;
    }
});

.btex{display:block; padding:9px; width:100%; min-height:54px; background:lightblue; border:0; outline:none;}
.bdiv{padding:9px; min-height:54px; background:lightblue; overflow-wrap: break-word;
    -webkit-user-modify: read-write-plaintext-only; border:0; outline:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='btex'></textarea>
<br>
<div class='bdiv'></div>

CodePudding user response：

I think I got it. Did some combinations on an answer. You really need to implement Shift Tab though. Also consider using an already made editor.

$('.btex').on('keydown', function(e) {
  if (e.keyCode === 9) {
    var val = this.value;
    var start = this.selectionStart;
    var end = this.selectionEnd;
    this.value = val.substring(0, start)   '\t'   val.substring(end);
    this.selectionStart = this.selectionEnd = start   1;
    return false;
  }
});

$('.bdiv').on('keydown', function(e) {
  if (e.keyCode === 9) {
    var val = this.textContent;
    var start = document.getSelection().baseOffset;
    var end = document.getSelection().extentOffset
    this.textContent = val.substring(0, start)   '\t'   val.substring(end);
    setCaret(start   1)
    return false;
  }
});

function setCaret(pos) {
  var el = document.getElementById("editable")
  var range = document.createRange()
  var sel = window.getSelection()

  range.setStart(el.childNodes[0], pos)
  range.collapse(true)

  sel.removeAllRanges()
  sel.addRange(range)
}

.btex {
  display: block;
  padding: 9px;
  width: 100%;
  min-height: 54px;
  background: lightblue;
  border: 0;
  outline: none;
}

.bdiv {
  padding: 9px;
  min-height: 54px;
  background: lightblue;
  overflow-wrap: break-word;
  -webkit-user-modify: read-write-plaintext-only;
  border: 0;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='btex'></textarea>
<br>
<div class='bdiv' id="editable"></div>