Javascript - Only works if I do an alert()

Question

I am trying to handle a contenteditable body in an iframe, in order to prevent browsers from adding br,p or div on their own when pressing Enter. But something weird happens when trying to reset the focus, and it just does work when making an alert() before processing the rest of the code. I think it is because javascript needs some time to make operations, but there must be a way to do it without "sleeping" the script...

Here I paste my code (working with Jquery), only WITH the "magic Alerts" it works perfectly:

//PREVENT DEFAULT STUFF
var iframewindow=document.getElementById('rte').contentWindow;
var input = iframewindow.document.body;

$( input ).keypress( function ( e ) {
var sel, node, offset, text, textBefore, textAfter, range;
// the Selection object
sel = iframewindow.getSelection();
alert(sel); //MAGIC ALERT

// the node that contains the caret
node = sel.anchorNode;
alert(node); //MAGIC ALERT

// if ENTER was pressed while the caret was inside the input field
if ( node.parentNode === input && e.keyCode === 13 ) {
    // prevent the browsers from inserting <div>, <p>, or <br> on their own
    e.preventDefault();

    // the caret position inside the node
    offset = sel.anchorOffset;   

    // insert a '\n' character at that position
    text = node.textContent;
    textBefore = text.slice( 0, offset );
    textAfter = text.slice( offset ) || ' ';
    node.textContent = textBefore + '\n' + textAfter;
SEEREF=SEEREF.replace(/\n/g, "<br>");
// position the caret after that newBR character
range = iframewindow.document.createRange();
range.setStart( node, offset + 4 );
range.setEnd( node, offset + 4 );

// update the selection
sel.removeAllRanges();
sel.addRange( range );
}
});

SEEREF = framewindow.document.body.innerHTML (it was too long)

Edit When I remove the Magic Alerts it still works on Chrome, but in FF it focuses on the beginning of all! (Like if it were offset=0)

UPDATE

It seems like the porblem is the line which replaces the newlines with br tags. If I remove this line, it works perfectly even without the alerts. I need to keep this br tags, is there any other way to do it?

what happens if you omit the alerts? What is the error message? — Christoph, Jul 03 '12 at 11:26
@Mageek I did not know what this is... (here I have the answer and I will try it - http://stackoverflow.com/questions/4743730/javascript-what-is-console-log-and-how-do-i-use-it) thanks! — Kenedy, Jul 03 '12 at 11:31
@Christoph Sorry!... i forgot to say it, but my question is updated now. When I omit them ther is any error message, but it does not work on the good way. — Kenedy, Jul 03 '12 at 11:32
Yes... also think so, but ther must be a way to get it without sleeping the code. I mean, without giving it extra time. Ta! — Kenedy, Jul 03 '12 at 11:46

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

This question is narrow of yours one. So you should combine doc & win:

var idoc= iframe.contentDocument || iframe.contentWindow.document; // ie compatibility
var iwin= iframe.contentWindow || iframe.contentDocument.defaultView;

... idoc.getSelection() +(''+iwin.getSelection()) //firefox fix

edited May 23 '17 at 10:29

Community

1
1

answered Jul 03 '12 at 11:26

Dewfy

23,277
13
73
121

jmmm... thank you, I read it twice but did not understand it yet (I am going to read it slower now). Where can I find information about the "||" when defining a var? what does it do?... I also do not understand the last line of your code. Do I need to use this to get the Iframe selection?. Anyways I am going to read it again... but your help (if you can) would be great again... thank you a lot. – Kenedy Jul 03 '12 at 11:36
So.. the problem is that my code is taking too much time to get the iframe selection? – Kenedy Jul 03 '12 at 11:40
`||` can be used in javascript instead of long construction if some value is null/undefined - provide default. For example if `x` is null we can do `x || 5` to get 5 instead of null. So for ie compatibility we take either one or another property. Another trick about `''+iwin.getSelection()` - mean that you cast object to string – Dewfy Jul 03 '12 at 11:58
I think I know where the real problem is... gonna update my answer again. Sorry. – Kenedy Jul 03 '12 at 12:59

Javascript - Only works if I do an alert()

1 Answers1

Linked