SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change langualge of textbox?

    Hi

    Can anybody guide me how can i create a textbox that accepts Hindi or any other language as input instead of English.

    Following are the two example sites that have this functionality.

    http://en.wikipedia.org/wiki/Hindi
    http://hindi.webdunia.com/

    Thanks,

  2. #2
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any help please ?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't see a textbox that allows you to type in Hindi on wikipedia.

    On webdunia they use a complex series of javascripts to allow you to type in hindi in the search box. I don't have time to decipher it, but it looks like they set up a textarea, apply an onkeyup event handler, and when that event occurs replace the english letter that the user typed with a hindi character.

    I wrote a simple character converter, this displays a textarea and converts the letters to ... hindi maybe? It's currently IE only so making the script cross browser I will leave as an exercise =).

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    // put the keyCode of the english letter next to the keyCode of the (insert language here) letter
    // check http://unicode.org/charts/ for references
    var translate = {
    	97: 2309,
    	98: 2310,
    	99: 2311,
    	100: 2312,
    	101: 2313,
    	102: 2314
    };
    
    function convertToHindi(evt) {
    	evt = evt ? evt : window.event;
    	kcode = evt.which ? evt.which : evt.keyCode;
    	evt.keyCode = translate[kcode] ? translate[kcode] : code;
    } 
    	
    
    </script>
    </head>
    <body>
    <textarea onkeypress="convertToHindi(event);"></textarea>
    </body>
    </html>
    PS I just did 6 letters so only a->f will show up as...whatever language it is

  4. #4
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks,

    It works perfectly in IE

    now trying to modify it so it work in all browsers.

    Thanks a lot for the help.


  5. #5
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi jimfraser

    can you please help further as i found that it is not possible to change the value of evt.keyCode in firefox

    Thanks

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's correct, event.keyCode and event.charCode are read only in firefox (why?)

    Sorry, I have no idea how to go about it in firefox. Maybe someone else can help with that part.

    This is, however, typical of firefox. Try to do something slightly non-standard and it sneers down its furry nose at you. (Maybe that will rile up the fanboys enough to come up with a firefox solution

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The solution is to cancel the current event and dispatch a new one.
    http://code.google.com/p/google-web-...s/detail?id=25
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    Here is the code you suggested:

    Code JavaScript:
    public class FireFoxTextBox extends TextBox {
            public void onBrowserEvent(Event event) {
                int type = DOM.eventGetType(event);
                if (type == Event.ONKEYPRESS) {
                       changeKeyCode(event);
                } else
                    super.onBrowserEvent(event);
            }
     
            public native void changeKeyCode(Event event) /*-{
     
               if (String.fromCharCode(event.charCode) == "Q") {
                      var newEvent = document.createEvent("KeyEvents")
                      newEvent.initKeyEvent("keypress", true, true,
    document.defaultView,
                      event.ctrlKey, event.altKey, event.shiftKey,
                      event.metaKey, 0, "F".charCodeAt(0))
                      event.preventDefault()
                      event.target.dispatchEvent(newEvent)
               }
            }-*/;
     
        }

    That was a great information, but that code is little complex for me and i am not sure how to use classes in javascript.

    Apart from that the comments given by people are not so good about this code.

    I think i need to look around for a totally different logic, that works in all browsers.

    Thanks

  9. #9
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for reference here is the link for wikipedia in hindi http://hi.wikipedia.org

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one Paul!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That code isn't javascript, it's C, and is a proposed fix for Firefox. The general idea though appears to be sound from a JavaScript perspective.

    It's easy enough to cancel an event, but can a keypress event be created from JavaScript?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    ...but can a keypress event be created from JavaScript?
    Yes:
    Code HTML4Strict:
    <!DOCTYPE html>
    <html>
    <body>
    <input type="text" id="name">
     
    <script>
    var name = document.getElementById("name");
     
    name.onkeypress = function(evt) {
    	alert("fields onkeypress event triggered");
    };
     
    function triggerKeyPress() {
    	var evt = document.createEvent("KeyboardEvent");
    	evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 100, 0);
    	name.dispatchEvent(evt);
    }
     
    triggerKeyPress();
    </script>
     
    </body>
    </html>

    Only got Firefox here at work, but it should work in browsers that have implemented the DOM Level 3 Events draft.

  13. #13
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and lets not forget our beloved IE:
    Code JavaScript:
    function ieSolution(){
    	var evt = document.createEventObject();
    	evt.keyCode = 100;
    	name.fireEvent("onkeypress", evt);
    }
     
    ieSolution();


  14. #14
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good ol' IE

  15. #15
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi jimfraser

    Can your please let me know how did you found the character codes you used in your code?

    I tried to find this on following files
    http://unicode.org/charts/PDF/U0900.pdf
    http://www.unicode.org/versions/Unicode4.0.0/ch09.pdf

    The character codes given hare are different but to my surprise they are not working with your code. I mean creating different language characters

    Thanks

  16. #16
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pepejeria

    I am studying prototype.js library as it provides inbuilt solutions to some of the IE and Firefox conflicts related to event object.

    I hope it will help me to come out with a more straight and easier solution which works in all browsers

    Thanks

  17. #17
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The numbers listed in the unicode charts are hexidecimal. You need to convert them to decimal (using calc or whatever).

  18. #18
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all help, I think this will be my last question related to this script.

    In Hindi we need to combine multiple key codes to create a single character
    Example: http://www.bhashaindia.com/Developer...pages.aspx#pl7

    How can i do this using the code suggested by jimfraser

    Code HTML4Strict:
    <html>
    <head>
    <script type="text/javascript">
     
    // put the keyCode of the english letter next to the keyCode of the (insert language here) letter
    // check [url]http://unicode.org/charts/[/url] for references
    var translate = {
    	97: 2309,
    	98: 2310,
    	99: 2311,
    	100: 2312,
    	101: 2313,
    	102: 2314
    };
     
    function convertToHindi(evt) {
    	evt = evt ? evt : window.event;
    	kcode = evt.which ? evt.which : evt.keyCode;
    	evt.keyCode = translate[kcode] ? translate[kcode] : code;
    } 
     
     
    </script>
    </head>
    <body>
    <textarea onkeypress="convertToHindi(event);"></textarea>
    </body>
    </html>

    Thanks,

  19. #19
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I found the JavaScript used on http://hi.wikipedia.org but now sure how to use it on my page.

    Any help please?
    I have attached the script here.

    Thanks,
    Last edited by longneck; May 13, 2008 at 06:06.

  20. #20
    reads the ********* Crier silver trophybronze trophy longneck's Avatar
    Join Date
    Feb 2004
    Location
    Tampa, FL (US)
    Posts
    9,854
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alokjain_lucky View Post
    I have attached the script here.
    i've deleted your attachment. the javascript contains a large block of encoded javascript and i'm not going to expose our members to code that can't properly be evaluated for security.
    Check out our new Industry News forum!
    Keep up-to-date with the latest SP news in the Community Crier

    I edit the SitePoint Podcast

  21. #21
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by longneck View Post
    i've deleted your attachment. the javascript contains a large block of encoded javascript and i'm not going to expose our members to code that can't properly be evaluated for security.
    It's not encoded javascript, the block that you can't read is actually HINDI characters, and that's what this script is for.

    However because you have rights you can delete anything without asking for a clarification, I think it's better that i upload the script somewhere and then just add a link here.

    Thanks,


Bookmarks

Posting Permissions

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