Javascript: How to make: when users hit enter key, shift+enter pressed for contenteditable

Question

When user hit enter, it creates div for line break, but this interferes with my markup, so I have to use br to imitate the line break. However, I found manipulating contenteditable div's html to insert br could cause some unnatural result position of the caret. Therefore I decide to use shift+enter to creates those br.

So tried:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<div id="inputbox"  contenteditable="true" ></div>

CSS:

<style>
#inputbox[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    float: left;
    color: rgba(134,134,134,0.6);

}
#inputbox{
  background-color:white;
  display:block !important;
  display:inline-block;
  margin-top:2px;
  min-height: 60px;
  text-align: center;
  white-space: break-word !important;
  width:521px;
  padding: 12px;
  border:1px solid #ffcc99;

  border-radius:3px;
  text-align: left;
  vertical-align: bottom;
}
#inputbox:focus{
  outline-style:solid;
  outline-width:0px;
  line-height:normal;
}
</style>

Javascript

<script>


var obj=$("#inputbox");

obj.keydown(function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
         var keyEvent = new KeyboardEvent("keypress", {keycode : 13, shiftKey: true});
        obj.dispatchEvent(keyEvent);
    }
});


</script>

Could anyone help me please, I've stuck on this for three days.Thanks in advance.

Why are you creating/dispatching a keypress event inside the keydown callback? — evolutionxbox, Jun 02 '16 at 13:58
@evolutionxbox He wants to trap the enter keypress and substitute it for shift+enter instead, as that has the desired effect. It's all in the question. — Reinstate Monica Cellio, Jun 02 '16 at 14:23
Does it? It sounds like an infinite loop. As keypress first fires keydown. — evolutionxbox, Jun 02 '16 at 14:25
@evolutionxbox I explained what he's trying to do. You're now explaining part of the problem. If you want to bitch about the question then just don't. If you want to help him then do :) — Reinstate Monica Cellio, Jun 02 '16 at 14:28
Now now. There's no bitchin going on. I'm just asking questions. — evolutionxbox, Jun 02 '16 at 14:29
I think [this is answer](http://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome) you're looking for. If it works, then that would make this question, unfortunately, a duplicate. - On a side note, I did think your approach would work, but the `div` insertion isn't stopped by using `preventDefault()`. — evolutionxbox, Jun 02 '16 at 14:37

score 0 · Answer 1 · answered Dec 09 '16 at 22:42

I created a fiddle that works fine in Chrome.

var shift_pressed = false;

function kd(e) {
  if (e.which === 16) {
    shift_pressed = true;
  } else if (e.which === 13) { // enter
    if (shift_pressed !== true) {
      e.preventDefault();
      document.execCommand("insertHTML", false, '<br>');
      return;
    }
  }
}

function ku(e) {
  if (e.which === 16)
    shift_pressed = false;
}

$(function() {
  $('#editable').on('keydown', kd);
  $('#editable').on('keyup', ku);
});

#editable {
  background-color: white;
  min-height: 150px;
  width: 80%;
  outline: none;
  margin: 20px auto;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">
  Test by typing here
</div>

Javascript: How to make: when users hit enter key, shift+enter pressed for contenteditable

1 Answers1