javasscript allow writing rtl and ltr in sentence

117 views Asked by At

i am trying to write rtl and ltr in one sentence in contenteditable div,but the whole sentence screwup.. i have tried to stick the cursor to end while writing but the words mirrored like ybab instead of baby and i cant seprate the words with space

    var div = document.getElementById("editor_content");

div.onkeydown = function() {

        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(true);
            range.select();
        }

};

please help me

1

There are 1 answers

1
Rainer Plumer On

I dont know exactly what you want to do, but i guess you want to type text from left to right and then have it mirrored from right to left....by words...not by letters.

<div id="content-left" style="min-height: 10em;" contenteditable="true">L </div>
<div id="content-right" style="min-height: 10em;" contenteditable="true">R </div>

var content = document.getElementById("content-left");
var mirror  = document.getElementById("content-right");
var update  = function() {

}
window.onkeyup = function(evt) {
    var text = content.innerText;
    var words;
    if (!text) {return ;}
    words = text.split(" ");
    words = words.reverse();
    mirror.innerText = words.join( " " );
}

#content-left, #content-right {background: #FAFAFA;padding: 0;margin: 0;width: 49.5%;float: left;}
#content-right {float: right;}

http://jsfiddle.net/rainerpl/asrny8zd/1/