How to make a content editable div behave like a text area?

Question

I have built an editor that converts markdown to html. Right now I have to use jquery autosize plugin to resize the text area as it grows.

If I use a content-editable div I can bypass it. But the problem with content editable div is that it does not preserve new lines. It inserts a new div every time return key is pressed. This breaks the rendering of markdown to html for my application.

Is there any way I can make a content editable div behave exactly like text area?

simple answer no. I worked recently with both and got stuck with the same issue. :( — Mr_Green, May 23 '13 at 13:27
You could possibly tell the browser to treat any "Enter", while the textarea is in focus, as "Shift+Enter" instead, which would enable it to stay within the same div. — Duniyadnd, May 23 '13 at 13:32
@Mr_Green well that is too bad really. So is using text area is my only option then? — Akshat Jiwan Sharma, May 23 '13 at 13:32
can you try html5 `contenteditable` http://html5demos.com/contenteditable — Sender, May 23 '13 at 13:34
@Duniyadnd That sounds interesting will it work will the content editable div too? I am going to give it a try... — Akshat Jiwan Sharma, May 23 '13 at 13:34
@AkshatJiwanSharma Sorry, I misunderstood your explanation. This has a workaround. let me work on it. — Mr_Green, May 23 '13 at 13:35
Have a look at this [**Link**](http://stackoverflow.com/a/4199691/1577396). — Mr_Green, May 23 '13 at 14:18

score 10 · Answer 1 · answered Dec 30 '14 at 20:48

10

After searching for an answer and not finding anything that worked completely I wrote my own jQuery plugin.

https://github.com/UziTech/jquery.toTextarea.js

I used white-space: pre-wrap; and inserted '\n' on enter. That way I can use $("div").text() to get the text and not worry about removing tags and formatting <br/>'s

DEMO:

http://jsfiddle.net/UziTech/4msdgjox/

answered Dec 30 '14 at 20:48

Tony Brix

3,825
7
37
48

Your plugin works perfectly and it really helped me a lot after struggling for a while with this. Thank you! – Leo Jul 15 '15 at 18:43
Thanks Tony. You really made my day.... I was struggling with this and was finaly about to write my own plugin but u saved my day. – prajnavantha Mar 01 '16 at 05:55

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Edit

After the @Mr_Green comment above, you should have a look at Make a <br> instead of <div></div> by pressing Enter on a contenteditable

The JS code to make it right is :

$(function(){

  $("#editable")

    // make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
      }
    })

    // use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

})

;

You can intercept the Enter key press and replace it with a <br> with Javascript :

$(function(){
    
      $("#editable").keypress(function(e) {
        if (e.which == 13) {
            e.preventDefault();
            
             if (document.selection) {
                document.selection.createRange().pasteHTML("<br/>");
             } else {
                $(this).append("<br/>");
             }
        }
    });
});

`document.selection` seems to be work only for IE. Is there any cross-browser solution? — Mr_Green, May 23 '13 at 13:54
Accepted this answer but I guess I will go with the default text area. Making div behave like text area is not worth the trouble for me. — Akshat Jiwan Sharma, May 23 '13 at 15:31

How to make a content editable div behave like a text area?

2 Answers2

Edit

Linked