Problem with onkeypress for Japanese input

Discussion in 'Web Design and Development' started by angelwatt, Jan 26, 2008.

  1. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #1
    This isn't a big problem, but would still like to hear about any solutions people know of. The problem is the event 'onkeypress' doesn't fire when using Japanese based textual inputs. I'm sure it's from the OS high-jacking the input to convert roman characters to the Japanese characters, but it does interfere with catching the event. I assume this would happen with other symbol based languages like Chinese and Korean.

    I've searched about and found others having the same problem, but never a solution, so thought I'd ask you all. The only way I've thought to get around it is to setup a function that would run the same function as the onkeypress event every so many seconds, but that's a lot of wasted processing.

    The situation I was using this for is counting the number of characters being used in a textarea and displaying it for the user on the screen as they type. It works fine for roman characters at least. Again, this isn't a huge problem, but if you know any solutions pass them on.
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Try substituting OnChange and onBlur respectively. I'd caution that this breaks section 508 compatibility but it's all I can think of for now.

    Otherwise, find a Flash or applet editor to use instead of a textarea, such as eWebEditPro or Tabula which might have allow a limit to be set (just speculating) and certainly looks nicer.

    -jim
     
  3. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Thanks for the ideas. I forgot about onchange, but it has the same problem as onblur, it only fires when the user enters or exit the textarea. I was going for making the changes as they typed, which onkeypress does, but unfortunately not for Japanese characters. I might be able to create my own event to watch for ... maybe.

    The programs you suggested look cool, but not what I need unless I start letting people send me HTML messages.

    Like I said though, not a huge problem and I don't expect many people trying to send me Japanese messages (though I do have a Japanese study section on my site), and if they do I don't know Japanese enough to understand them anyways. I was just curious about solutions in case I ever run across a problem where I need it.
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    How about using window.event and window.event.keypress when the form is focused?

    To force focus do something like this (although I can't promise it'll remember carat position, i.e. x/y position in textarea):

    or use this method to force focus back to the text area in your existing functions using onchange and onblur.

    I'm out of ideas after this.

    Here's a helpful page on which multibyte character set (encoding) to use depending on various requirements and limitations:

    http://lfw.org/text/jp-www.html

    -jim
     
  5. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I tried quoting your post as you were submitting an edit and it was confusing the hell out of me because I knew what it was quoting was not what I just read a syour post. I thought MacRumors was imploding until I refreshed the screen. :confused:

    .... Anyways ...

    That link had some decent information considering it hasn't been updated since 1996, but not a ton of help. I'm using utf-8 on the page. If you want to see the page you can find my site in my profile here, then go to Contact and Feedback. I'd rather not directly link. You won't be able to test the problem though unless you can type multi-byte characters like Japanese. Also, I currently have the JavaScript embedded in the textarea tag. I'll change that later.

    I eluded in an earlier post about using the setTimeout as a way to do it, but it's not a horribly clean solution, but would definitely work.
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Sorry, no Japanese support on these crappy work computers. But the link I sent you includes instructions on how to setup a computer to display Japanese characters based on the encoding. It includes software to display the actual character set, plus some browser changes.

    Good luck with this one!

    -jim
     
  7. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    "Good Enough" Solution

    Right, but I can display Japanese fine as well as type it. That's why it wasn't a ton of help. Though I do need to provide a link for Windows users as how to setup Windows to display Japanese characters correctly on some of my other pages. I believe Mac handles it fine without changes....

    Anyways though, thanks for brainstorming with me on this Jim. I've come up with a solution that I'm OK with, but not thrilled with simply because it shouldn't take a work around. I went from one line of code to about a dozen. Below is what I came up with for those who may need it or are simply curious.

    Relevant HTML:
    HTML:
    <p><label for="msg">Message: *</label> Max: 1200 - Using:
    <span id="msgLength">0</span>
    <textarea id="msg" name="msg" cols="45" rows="7"></textarea></p>
    
    Relevant JavaScript:
    Code:
    function $(id) { return document.getElemenById(id); }
    var myTimer = 0; // for setTimeout
    
    function Init()
    {
      $('msg').onfocus = function () {
        function countem() {
          msg = $('msg').value;
          $('msgLength').innerHTML = msg.length;
          myTimer = setTimeout(countem, 1000);
        }
        countem();
      };
      $('msg').onblur = function () { clearTimeout(myTimer); };
    }
    window.onload = Init;
     

Share This Page