2

I am working on a jQuery plugin for converting Latin characters to Japanese kana symbols (live example) in real-time (auto-correct) and it works correctly if I'm not typing too fast.. Which is a problem.

For example:

wakarimasu -> わかります

However, when I type at my normal speed I get this:

wakarimasu -> わかりあすm (which is actually wakariasum, cursor between "す" and "m" in the end)

If I type it without "su", I get this:

wakarima -> わかりあm (which is actually wakariam, cursor between "あ" and "m" in the end)

I figured out why and how this is happening. Basically, "ri - り" symbol is still converting from Latin to Japanese kana while I already typed "m" in and it finishes just a little bit before I manage to type "a" in. Since my function positions the cursor after each conversion, it positions the cursor between "ri" and "m" and that is where my "a" ends up.

This happens for other words as well, but I took this one as an example.

Is there a way I could track the cursor position in a smarter way or is there a way to update/convert/replace only parts of textfield without updating the whole textfield (the way it works now is it fetches what is in the textfield, replaces Latin with kana inside a variable inside the function, updates the textfield with the new string from a variable and then positions the cursor)? Telling visitors not to type too fast wouldn't really be the way to go..

Legend: wa=わ ka=か ri=り ma=ま su=す a=あ

Source can be viewed at the link I provided. Thanks.

Edit: One more thing to think about is that a user might move cursor left and right to add or remove characters/symbols. This complicates positioning a little bit but it works at the moment.

5
  • 2
    try storing the user input in a data attribute, that way you can convert it properly each time, since you know the whole context
    – bevacqua
    Sep 30, 2012 at 15:36
  • It also won't work if you copy and paste, but solving that will be a much larger problem.
    – howderek
    Sep 30, 2012 at 22:28
  • @howderek - yes, but I am planning to use this later in something where a person will be supposed to type something in, not c/p it and just wanted to share it as a plugin, perhaps somebody might find it useful.
    – tkit
    Sep 30, 2012 at 22:47
  • No, don't get me wrong, I think its awesome, I was just pointing out that it will either require a lot more code, or only work for certain situations.
    – howderek
    Sep 30, 2012 at 22:51
  • @howderek yup, I agree :) thnx
    – tkit
    Sep 30, 2012 at 22:59

2 Answers 2

1
function translateWord( textarea, oldText, newText ) {
  var ctpos   = getCaretPosition( textarea );

  var textStr = textarea.value;

  var oldTextLen  = oldText.split("").length;
  var newTextLen  = newText.split("").length;

  var txtDiffLen  = ( newTextLen - oldTextLen );

  var escText = oldText.replace( /([()\[\]\\\/+*?.-])/g, "\\$1" );
  var regExpr = new RegExp( "\\b"+escText+"\\b", 'gi' );
  var diffStr = textStr.match( regExpr );
      diffStr = ( diffStr ) ? diffStr.length : 1;

  var newStr  = textStr.replace( regExpr, newText );
      ctpos   = ( ctpos + ( txtDiffLen * diffStr ) );

  textarea.value = newStr;
  setCaretPosition( textarea, ctpos );
}

function getCaretPosition( textarea ) {
  if ( textarea.selectionStart ) {
    return textarea.selectionStart;
  }
  else if ( !document.selection ) {
    return 0;
  }

  var c   = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText( textarea );
  sel.text  = c;
  len = dul.text.indexOf( c );
  sel.moveStart( 'character', -1 );
  sel.text  = "";
  return len;
}

function setCaretPosition( textarea, pos ) {
  if ( textarea.setSelectionRange ) {
    textarea.focus();
    textarea.setSelectionRange( pos, pos );
  }
  else if ( textarea.createTextRange ) {
    var range = textarea.createTextRange();
        range.collapse( true );
        range.moveEnd( 'character', pos );
        range.moveStart( 'character', pos );
        range.select();
  }
}

translateWord( document.getElementById('text-input'), 'wakarimasu', 'わかります' );

I know it's an old question, but this code will help some noobs like me :) Mixed functions from some other answers :)

0

To close this one up, I managed to figure out that the problem was actually that the third character ("m" in this case) went into the same .keyup iteration as "ri" and not after it as I previously thought (same symptom, but different reason)..

To fix this I just modified the .keyup code to add +1 to the offset to shift the cursor to the right for one position if after the conversion there is a latin (roumaji) character left in the string.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.