2

ラテン文字を日本語の仮名記号 ( live example ) にリアルタイム (自動修正) で変換するための jQuery プラグインに取り組んでいます。

例えば：

わかります -> 分かります</p>

ただし、通常の速度で入力すると、次のようになります。

wakarimasu -> わかりあすm

「su」なしで入力すると、次のようになります。

wakarima -> わかりあm (これは実際には wakarim であり、末尾の "あ" と "m" の間のカーソル)

なぜ、どのようにこれが起こっているのかを理解しました。基本的に、「ri - り」記号はまだラテン語から日本語のかなに変換されていますが、既に「m」を入力しており、「a」を入力する前に少し終了します。関数は変換ごとにカーソルを配置するため、 、それはカーソルを「ri」と「m」の間に置き、それが私の「a」が終わるところです。

これは他の単語でも起こりますが、例としてこれを取り上げました。

よりスマートな方法でカーソル位置を追跡できる方法はありますか、またはテキストフィールド全体を更新せずにテキストフィールドの一部のみを更新/変換/置換する方法はありますか(現在の動作方法は、テキストフィールドにあるものをフェッチし、置換します関数内の変数内に仮名を含むラテン語は、テキストフィールドを変数からの新しい文字列で更新し、カーソルを配置します)? 訪問者にタイプしすぎないように言うのは、実際には適切ではありません..

凡例: wa=わ ka=かり ri=り ma=ま su=す a=あ</p>

ソースは、私が提供したリンクで表示できます。ありがとう。

編集: もう 1 つ考慮すべきことは、ユーザーがカーソルを左右に移動して、文字/記号を追加または削除する可能性があることです。これはポジショニングを少し複雑にしますが、現時点では機能します。

4

2 に答える 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', 'わかります' );

私はそれが古い質問であることを知っていますが、このコードは私のような一部の初心者に役立ちます:)他の回答からの混合機能:)

于 2013-06-11T21:21:06.567 に答える
0

これを締めくくるために、問題は実際には 3 番目の文字 (この場合は "m") が、以前考えていたように "ri" と同じ .keyup 反復ではなく、同じ .keyup 反復に入ったことにあることがわかりました (同じ症状、しかし別の理由).

これを修正するために、.keyup コードを変更してオフセットに +1 を追加し、変換後に文字列にラテン語 (roumaji) 文字が残っている場合にカーソルを 1 桁右にシフトしました。

于 2012-10-06T00:28:59.367 に答える