1

I'm using this function in order to replace <DIV>New Divs</DIV> with <BR> in break lines on contentEditable divs using Safari and Chrome:

$("#form_description").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;
}
}
});

The problem is that when I'm typing inside an <UL><LI>Something</LI></UL> and I press the "return" key, I don't want to get a <BR>, so I can continue whit the list...

How could I create a condition for that function not to work if I'm inside a LI element?

EDIT WITH MY ANSWER:

Ok, I've managed to do it, but If you have any comment on the code, you're welcome:

$("#form_description").live("keypress", function(e){
if (e.which == 13) {

  node = document.getSelection().anchorNode;
  nodeName = node.parentNode.nodeName.toLowerCase();

  if ((nodeName != "li") && (nodeName != "blockquote")) {
... etc }
Santiago
  • 2,405
  • 6
  • 31
  • 43

1 Answers1

1

First, use keyup as the event name, keypress works only on Firefox.

Second, e.which is not always available. Use e.keyCode primarily, and fall back to e.which:

var code = e.keyCode || e.which;
if (code == 13) {
  // your code here..
}

Third, if you need to cancel default events fired in the key-press, you might want to throw in a preventDefault() inside your event handler routine. Make sure it's the first line.

function(e){
   e.preventDefault();
 ..
}
Bora
  • 283
  • 7
  • 21
  • Thanks for your feedback. If I use "keyup", I get two (2) BRs for each return key pressed. Anyway, with "keypress" it's working on Safari and Chrome... Do you think it could be a problem? And with the "e.preventDefault();" I just can't type anything, I think because it's preventing the keypress maybe? – Santiago May 17 '11 at 08:43
  • "..if you need to cancel default events.." well, if you need to handle keypress on your own and not letting itself register as one, use that. Otherwise, not.. – Bora May 17 '11 at 10:19
  • 3
    This answer is pretty much completely wrong, I'm afraid. First, `keypress` works in all major browsers. Second, all major browsers support `keyCode` for `keyup` events. Third, `keyup` is no help here since by the time it fires it's too late to cancel the browser's default action for the keystroke. Fourth, the original code is using jQuery, which normalizes the `keypress` event's `which` property (no need for `keyCode`) and in which `return false` does the job of `preventDefault()` in an event listener function. – Tim Down May 18 '11 at 09:14
  • You should know the difference between `return false;` and `preventDefault()`, which you can look it up yourself. – Bora May 18 '11 at 09:21
  • @Bora: I know the difference. My point was that there's no need to add `e.preventDefault();` because there's already a `return false`. – Tim Down May 19 '11 at 10:14
  • @Tim, Come on, man, it's not about code correction, it's about good programming. – Bora May 19 '11 at 11:18
  • @Bora: Fair enough, but it's not clear from your answer that you're recommending `e.preventDefault()` over `return false`: it looks like you haven't noticed that there's a `return false` there. – Tim Down May 19 '11 at 11:28