CODEWITHSUNDEEP
jquerycontenteditableline-breaks
Fr0z3n
Fr0z3n

Reputation: 1576

Prevent Line Break on contentEditable DIV

I have a contentEditable DIV, and i need to prevent the insertion of Line Break on Enter keypress, and allow it only by pressing Shift + Enter

I've tried:

$(".element").on('keydown', function(e) {
    if (e.keyCode == 13 && !e.shiftKey){
        e.preventDefault();
    }
});

But doesn't work. It works only on Textarea..

Is there a way to do it?

Edit: i've tried it on jsFiddle, and it is working, but on the page i'm working on does not.

It is a DOM generated contentEditable DIV:

<div class="wysibb-body" contentEditable="true"></div>

Decommenting the alert() i get it, but after closing it, the line break is inserted.

$(".wysibb-body").on('keydown', function(e) {
    if (e.keyCode == 13 && !e.shiftKey){
        //alert('Enter pressed');
        e.preventDefault();
    }
});

Upvotes: 2

Views: 5002

Answers (2)

Ihor Patychenko
Ihor Patychenko

Reputation: 196

I`ve been trying this code, and its works:

$(document).ready(function(e){
     $(".wysibb-body").keydown(function(e) {
         if (e.keyCode == 13 && e.shiftKey){
              alert('Enter + shift pressed');

         } else if(e.keyCode == 13){
              e.preventDefault();
         }
    });
});

Tested en chrome, firefox, safari, opera, IE 8 and works perfect

Upvotes: 5

Fr0z3n
Fr0z3n

Reputation: 1576

Found out why wasn't working.

The DIV was generated by a jQuery plugin. Looking into it, i found out that there was already an event to insert a <br> on enter keyPress.

Upvotes: 0

Related Questions