Why textarea with contenteditable value true don't register keydown event

Question

It just confuse me.
As the code below shows, when you press "ctrl + b" in div, the font weight turn bolder, while, it won't happen in textarea.
This question is based on comments in Marcus Ekwall's answer to Rendering HTML inside textarea. But I can't add a comment, so I ask here.

div, textarea {
    width: 100px;
    height: 100px;
    border: 1px solid;
    padding: 5px;
}
textarea {
    resize: none;
}

<div contentEditable="true"></div>
<textarea contentEditable="true" placeholder="textarea"></textarea>

What would be the point of `contenteditable` in a textarea, you still can't add anything other than plain text — adeneo, Jan 21 '16 at 04:46
Pressing ctrl+b in the browser it use its default function for eg. in firefox it invokes `bookmark` toolbar. You need to catch keypress events with javascript to do so. — Bhojendra Rauniyar, Jan 21 '16 at 04:46
And did you read the answer you're referring to -> *"This is not possible to do with a textarea"* — adeneo, Jan 21 '16 at 04:49
@adeneo Of course I did, but that means "Rendering HTML inside textarea" is not possible other than specifing `contenteditable` attribute. `contenteditable` can be used to all HTML element if I didn't misunderstand. see: [HTML5 Attributes](https://www.w3.org/TR/html51/index.html#attributes-3) — jasonxia23, Jan 21 '16 at 05:17
@BhojendraNepal I hold the same opinion. It really confuse me after test it on IE and Chrome. — jasonxia23, Jan 21 '16 at 05:23
contexteditable is technically supported for all elements but that doesn't mean it actually works for all elements a canvas is a good description of another element that doesn't work with contexteditable. Also your other problem there is the priority of the system meaning when a key is pressed it goes first to the operating system on the computer then to the browser then to your web page so if Mozilla Firefox intercepts ctrl b unless there is some way Firefox allows you to disable it you can't capture it because it never reaches your web page. — Binvention, Jan 21 '16 at 05:31
@JasonXia Because those browsers didn't assigned any events for that key. — Bhojendra Rauniyar, Jan 21 '16 at 05:33
Contexteditable allows you to edit the text inside your element including html however the textarea element does not support html markup so there is no benefit to adding the context editable attribute it can still only handle basic text — Binvention, Jan 21 '16 at 05:42
@Binvention Well, thanks for your clear comment. It seems to be browser specific. Isn't it. :) — jasonxia23, Jan 21 '16 at 05:44
Yes it is browser specific sorry there isn't really anything to fix it. Goodluck trying to work around it. — Binvention, Jan 21 '16 at 05:45

score 3 · Answer 1 · edited May 23 '17 at 12:15

in textarea doesn't work because It can not support HTML tags when it run document.execCommand("bold") add <b>fdsfsdfds</b> in selected text

Here you are an example using jQuery (updated)

$("#editor").keypress("c",function(e){
  
 if(e.ctrlKey) {        
      
     document.execCommand('bold', false, null);


  }
    
})

#editor {
    width: 200px;
    height: 200px;
    border: 1px solid;
    padding: 5px;
    resize: none;
    border: 1px solid black;
    word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="editor" contentEditable="true"></div>

please see this post about keypress jquery: keypress, ctrl+c (or some combo like that)

more examples about document.execCommand http://codepen.io/netsi1964/pen/QbLLGW http://codepen.io/netsi1964/pen/QbLLGW

Thanks for your example. But `.blod` will make effect on all the text in textare, not just text after I press `ctrl + b`. — jasonxia23, Jan 21 '16 at 05:27

score 0 · Accepted Answer · answered Jan 21 '16 at 06:24

0

The behavior is just browser specific. Different browsers have different behaviors. And thanks to adeneo's mention: In a textarea, one can't add anything other than plain text.

answered Jan 21 '16 at 06:24

jasonxia23

147
1
12

Why textarea with contenteditable value true don't register keydown event

2 Answers2