Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Registered User
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile A cross browser persian editor, please...

    Hello,

    I've this code and it works great on Google Chrome, FireFox & etc..
    But there is still a little problem with editing text, for example if I wanna edit a word I can't:

    Herdo (so If I want to correct that to Hero I can't just type e instead d in that word it goes at the end of editor so I should copy and paste entire word to replace the current one)
    If some one can help me how to fix that works on all browsers I'll be grateful.

    Here is the code:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml"

    <
    head

    <
    meta content="text/html; charset=utf-8" http-equiv="content-type" /> 

    <!--
    Persian Language Script-->
    <
    script type="text/javascript">
      var
        
    arabic =' !"#$%،گ)(×+و-./0123456789:ك,=.؟@ِذژىُيلآ÷ـ،/’د×؛َءٍ،‘{ًْإ~جپچ^_پشذزیثبلاهتنمئدخحضقسفعرصطغظ<|>ّ';
      function 
    keyenter(ev){
        var
          
    acode window.event window.event.keyCode ev.charCode;
        if (
    acode>31 && acode<128){
          if (
    ev.target){
            
    ev.target.value += 
              
    String.fromCharCode(arabic.charCodeAt(acode-32));
            
    ev.preventDefault();
          }
          else{
            
    window.event.keyCode arabic.charCodeAt(acode-32);
          }
        }
      }
    </script>
    <!--/Persian Language Script-->

    </head> 

    <body> 
    <textarea name="postText" id="postText" cols="38" rows="12" class="textForm postingForm" tabindex="2"  onkeypress="keyenter(event)"></textarea>
    </body>

    </html> 
    Thanks in advance.

    Kind regards,

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Consider one of these possible solutions ...
    http://www.google.com/search?q=javas...ient=firefox-a

  • #3
    Registered User
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Some on just can change that to work for Chrome & Firefox?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Ersa View Post
    Some on just can change that to work for Chrome & Firefox?
    What does that mean?

    AFAIK, links provided should work in all browsers.

  • #5
    Registered User
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code works for all browsers and we can type in persian, that's no problem. But the problem is when I'm typing a word in persian and want to edit it the word can't be edited it goes the last of text and don't know how to fix it. if you could try typing a word via that code and just type a sentence and try to edit middle of text you can't edit that because it goes the last of text, so if someone can help me to fix that I'll be grateful

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Did you look at the link of post #2.
    It has several solutions to your problem.
    As far as I can tell, it does not depend on any language to work.

  • #7
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    @Ersa to answer your question
    you can't edit that because it goes the last of text, so if someone can help me to fix that
    I refer you to the line of code
    PHP Code:
    ev.target.value += 
    this is where you tell your script to ignore the caret position and simply append the text with the new value. If you never need to edit the middle that works just fine. However, if you need to edit the middle you need to

    - find the position of the caret
    - store the caret position in a variable (IE caretPos)
    - insert your transformed symbol at the position of caretPos

    the links provided by jmerker will help you to do all of that

    There is a similar thread on coding forums that handles that very same issue, except instead of changing languages the OP simply wanted to capitalize the input, but the caret function will work for you just the same:

    Quote Originally Posted by blaze4218 View Post
    ...try this:
    Code:
     function c_upper(el){
      var caret_position = getCaretPosition(el)
      el.value=el.value.toUpperCase()
      setCaretPosition(el, caret_position)
      }
    
    //http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox
    function getCaretPosition (el) {
    
      if (el.selectionStart) {
        return el.selectionStart;
      } else if (document.selection) {
        el.focus();
    
        var r = document.selection.createRange();
        if (r == null) {
          return 0;
        }
    
        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
    
        return rc.text.length;
      } 
      return 0;
    
    }
    
    
    function setCaretPosition(ctrl, pos)
    {
    
        if(ctrl.setSelectionRange)
        {
            ctrl.focus();
            ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }
    in that example you would replace the bit about "c_uppper" with your function
    Also you could read the whole thread for a little insight about implementation: Keypress capitalize function broken in IE9
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #8
    Registered User
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that I've tried but couldn't fix it.

    How about this one: (it just works with IE, and it's not like before one I can edit middle of text but it doesn't work with firefox and other browsers)

    Any Idea to make it works with all browsers?

    Code:
    <!--Persian Language Script-->
    <script language=javascript>
    function keyenter(field,e)
    {
    var key;
    if (window.event)
    key = window.event.keyCode;
    
    if (key>31)
    if (key<128)
    {
    if (window.event)
    window.event.keyCode=' !"#$%،گ)(×+و-./0123456789:ك,=.؟@ِذ}ىُيلآ÷ـ،/'د×؛َءٍف'{ًْإ~جژچ^_پشذزیثبلاهتنمئدخحضقسفعرصطغظ<|>ّ'.charCodeAt(key-32);
    }
    }
    </script>
    <!--/Persian Language Script-->
    And what would be Keyenter for that?

    Regards,

  • #9
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    As far as the code in post#8 -- It looks like your overriding an IE only functionality (window.event.keyCode) that's why it fails in other browsers. You should be able to just modify that functionality to accept all browsers "built in" methods:

    Code:
    <!--Persian Language Script-->
    <script language=javascript>
    function keyenter(field,e)
    {
    var key;
    if (window.event)
    key = window.event ? window.event.keyCode : e.charCode;
    
    if (key>31)
    if (key<128)
    {
    key=' !"#$%،گ)(×+و-./0123456789:ك,=.؟@ِذ}ىُيلآ÷ـ،/'د×؛َءٍف'{ًْإ~جژچ^_پشذزیثبلاهتنمئدخحضقسفعرصطغظ<|>ّ'.charCodeAt(key-32);
    }
    }
    </script>
    <!--/Persian Language Script-->
    but I'm just guessing...

    As far as my earlier recommendation I missed a key factor, and that method wouldn't really work (at least not the way I described ).
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #10
    Registered User
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So would kepress be like thisnkeypress="keyenter(this,event)"

    But it didn't work..

    I really appreciate it guys..

    I hope there will be some way to fix that.

  • #11
    Registered User
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've found some useful script and seems working good.

    But how if I want to add witch language button on that script place of shortcut?

    Here is the code for switching language by shortcut, is there any way to change it and put button instead of that?

    PHP Code:
    function switchTextLang(fieldevent) {
        var 
    event document.all window.event event;
        if (
    event.ctrlKey && event.altKey) {
            if (
    field.lang == "fa") {
                
    field.dir "ltr";
                
    field.onkeypress = function() {
                }
            }
            else {
                
    field.dir "rtl";
                
    field.onkeypress = function(event) {
                    
    keyEnterToPersian(thisevent);
                }
            }
        }
        
    field.lang field.lang == "fa" "en" "fa";



  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •