3

テキストエリアを逆にするために次のcssを使用しています：

.reverse
{
  /* reverse the text */
  transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1); 
  -o-transform: scale(-1, 1); 
  transform: scale(-1, 1);
}

これはうまく機能しますが、1 つだけ例外があります。矢印キーを使用してテキストをナビゲートする操作が逆方向になりました。矢印キーの方向を逆にして、期待どおりに動作させたいです。これが私が試したことです：

$(document).ready(function() {

  // flag which indicates when the key event has been overridden
  var keyEventOverridden = false;

  // reverse the arrow keys for the reverse textbox
  $(".reverse").bind("keydown keyup", function(event) {

    // allow the default behavior if the key has already been overridden
    if (keyEventOverridden)
      return true;

    // get the keyCode
    var keyCode = event.keyCode || event.which;

    // create the replacement event
    var replacementEvent = $.Event(event.type);

    // trigger the right key if the left key was pressed down
    if (keyCode === 37)
    {
      replacementEvent.keyCode = 39;
      replacementEvent.which = 39;
    }
    // trigger the left key if the right key was pressed down
    else if (keyCode === 39)
    {
      replacementEvent.keyCode = 37;
      replacementEvent.which = 37;
    }
    else
    {
      // allow the default behavior
      return true;
    }

    // prevent the key event from being overridden again
    keyEventOverridden = true;

    // trigger the replacement event
    $(this).trigger(replacementEvent);

    // allow the key event to be overridden again
    keyEventOverridden = false;

    // prevent the default behavior
    return false;
  });
});

このスクリプトは機能しません。誰にも理由はありますか？

4

1 に答える 1

2

ええと、最初に設計した方法で動作させることができませんでした（つまり、疑似イベントをトリガーすることにより）。ブラウザは、操作されたイベントを許可していません。

私はおそらくあなたに役立つ回避策を行いました。

デモを確認してください: http://jsfiddle.net/pL3Yj/6/

解決策には、左右の矢印をオーバーライドし、キャレットを自分で移動することが含まれます。

于 2012-09-30T10:34:14.763 に答える