capture enter key and disable new line

I am using divs with contenteditable set to true. I want these divs to behave like input text elements. This means that the div should only have one line. If the user presses enter on a div then I would like to capture this event and prevent the new line from increasing the height of the div.

I have set the css for the div to

.inputElem
{
	width:100%;
	height:20px; 
	margin:0px;
	padding:0px;
	
}

Code (markup):

I tried using the white-space value, but that didn't work.

I tried capturing the enter key and returning false, but that didn't work. Is there a way in javascript to do this (preferably cross browser compatible)?

 

i am not sure how this would work - there is a set of events that are associated with traditional editable elements like input and textarea - like element.onkeydown = function(e) { ... handle keydown; }

however, if you type into a normal div, you need the event listener into the window, probably - then need to track if the element is being edited and if so, compare enter value and so forth.

http://mooshell.net/PdWVa/1/ -> through mootools, enter will be ignored.

basically - you need to handle all possible e.key types like arrows, backspace etc, essentially, reinventing the wheel. you should convert the div to a textarea or input on the click instead and then add the event listener on the element itself, killing the enter.

best - find a project like tinymce or http://ckeditor.com/ and use that instead, it does what you need it to do already, just configure it and strip what you don't want.

 

Actually I found the solution. If anyone is interested here is what I did.

After I checked for keyCode ==13 I added this code

event.cancelBubble = true;
event.returnValue = false;

Code (markup):

Then I continued with the function.