Capturing 'enter' and replacing it with 'shift+enter'

[WAlurker]

My problem is the following. I have an editable <div>:
<div class='edit' id='divContent' name='divContent' ContentEditable>some text</div>

If I press 'enter' two lines are skipped. I know that if I press 'shift+enter' only one line will be skipped. If I check the unformatted code of the contenteditable div, 'enter' gives me <p> and 'shift+enter' gives me <br>, which makes sense because <p> is formatted differently than <br>.

So I want to change 'enter' into 'shift+enter'

I have already found something to capture and kill 'return'
function killReturn()
{
key = event.keyCode;
if (key == 13) return false;
}

But now for some means to replace the killed 'enter' with 'shift+enter'?

Thanks a lot in advance for any advise!

[Cloudski]

Couldn't you simply find out what the value of 'Shift+Enter' is, then say...

if(key == 13) key = 'Shift+Enter value';

Obviously, replace the bold test with the numberical value of 'Shift+Enter' :)

That help?

[WAlurker]

Indeed!, but what is the numerical value of that key... or rather where can I find it?

I have tried adapting the routine to capture and kill 'return' decribed in my previous post to alert me what key was pressed, but it only returned me the value of the shift key. This led me to believe that this routine would not suffice as it reacted to pressing one key, not a combination of keys.

Then again 'believes' are only just that :)

[Cloudski]

Well, then there is only one thing to do.... brown-nose and beg....

Hello smart people of this forum,

Do any of you VERY intelegent people know what the key value or 'Shift+Enter' is. If it is, in a very miniscule possility, away from your knowledge, do you know of any resources that could help this problem?

I thank you all VERY much ahead of time, and do not intend to keep you very long for your obviously important lives.


*shrugs* MAybe that will work.. anyways.. seriously.. this is now kinda confusing... do we just add the keypresses together?

[WAlurker]

Well I did some more research on this. I found out that:

event.shiftKey

determines whether shift was pressed or not. If shift was pressed:

event.shiftKey = true

if shift was not pressed:

event.shiftKey = false

Anyway I have tried setting the 'event.shiftKey' to true, but get an error that the member could not be found.

[WAlurker]

Well, after 6 hours of searching (yes and doing mostly other stuff :) ) I found a solution that works for me:

i make sure the 'event.keyCode == 13' is somehow stopped and the 'enter' is stopped, instead i have it paste a variable that has the following value 'unescape("%0A")'.

It worked for me so :)

Anyway here's the code if anyone is interested:

function killReturn()
{
key = event.keyCode;
if (key == 13) {
temporary = unescape("%0A")
idContent.document.execCommand('paste',"",temporary);
return false;
}
}


use onKeyDown='return killReturn()' to call the function.


EDIT:

Someone else has come up with a different solution that also works:


//put this eventhandler somewhere in the code:
EditLayer.onkeydown = EditorkillEnter();

//then put this function somewhere:
function EditorKillEnter()
{ //check whether the shiftKey isn't used at the same time
if(event.keyCode == 13 && !event.shiftKey)
{ //check if an image isn't selected
var TempTR = EditLayer.document.selection.createRange();
if(TempTR.pasteHTML)
TempTR.pasteHTML("<br><wbr>");
return false;
}
else
return true;
}

[homerUK]

hi,

I've looked at your code, and it seems to work when I use a div tag like yours....

but...

I am using an iFrame to allow people to edit their text. No matter where I put the "return killReturn()" I cant get it to work!

my iFrame looks like this:


<iframe id="iView" src="test.htm" onLoad="toggleBorders();" onKeyDown="return killReturn();"></iframe>


as you can see, I have put the killReturn in the iFrame part... but that doesnt work...

I have also tried putting the "return Killreturn" in "test.htm" and that works when it's not loaded inside the iFRame.

Any ideas where I'm going wrong?!!!

thanks.

[krycek]

Hi guys :)

I just skimmed through... if you are still looking for the value of the "shift-enter" character, then can I suggest ascii character 10 (linefeed). I *think* this will do what you want, however I am not entirely sure what you have got going on with the editable div etc, and I haven't got time to look more carefully at the moment :0

So... try replacing char 13 (enter) with 10 (linefeed) and see what happens... if it doesn't work, I'll read this thread again tomorrow and see if I can offer any more suggestions.

::] krycek [::

[krycek]

lol... :)

I just read through more thoroughly, and I noticed that the method that works for you uses hex char 0A, which is number 10 in decimal... exactly what I recommended :)

It's nice to know I was right, even if you have already got it working (when I posted earlier I thought you had just come up with a workaround).

So, you can use if either way... the way you are now, or else tell it to simply use ASCII char 10 instead of 13 :)

::] krycek [::

[F.N.G.]

I ran across a simpler answer that requires no key-code manipulation...


the "Single Spacing in Editable Divs" question from this (http://msdn.microsoft.com/library/en-us/dnwebteam/html/webteam10012002.asp) page was solved with:

You can force single-spacing when you hit return in a content-editable element by seeding it with an inner DIV like so:

<DIV contenteditable="true" style="border:1px solid"><DIV></DIV></DIV>

[sam_pitroda]

Hi guys,

Post above is very useful and by using this I am able to replace 'enter' with 'shift + enter'. by doing this bullets and numbering in my editor is not working. As a workaround now what i want to achieve is replace 'shift + enter' with 'enter'. I tried following code which is not working as expected.

if(e.keyCode == 13 && e.shiftKey)
{
ed.document.execCommand('paste',"",unescape("%0D%0A"));
return false;
}

[ckeyrouz]

Not all methods work with execCommand on all browsers.

Which browser are you using?

I think the paste is IE specific.

Give more info please.

[sam_pitroda]

I am using Internet Explorer.

Basically I am using CLEditor. In IE when you press enter in CLEditor it add <p> tag and adds an extra line. I wanted to change this behavior so I used code same as above post in killReturn() method, which is working fine.

Now because I have changed beavior of <Enter> key, I can't use bulleting and numbering in CLEditor. Because every time i press enter it adds single line return.

I am kind of in either or situation. Either i can use bullets and numbering or i can change <p> with <br /> tag.