使用jQuery反转箭头按键操作

Question

使用jQuery反转箭头按键操作

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);
}

这很不错，唯一的问题是：使用箭头键浏览文本时现在是相反方向的。我想反转箭头键的方向，使它们按预期工作。以下是我的尝试：

$(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;
  });
});

这个脚本不能正常工作。有人有任何想法吗？

- LandonSchropp

也许可以提供一个代码片段，这样我们就可以进行调试了？ - techfoobar

调试它以查看是否可以做些什么... - techfoobar

感谢 @TJ 发布这个 fiddle。我对它进行了一些美观上的改动。 - LandonSchropp

@TJ- 原始文件没有改变。它仍然可以通过您发布的链接访问。 - techfoobar

@TJ 哎呀，这是techfoobar的答案稍微整理过的版本：http://jsfiddle.net/pL3Yj/10/. - LandonSchropp

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- techfoobar · Accepted Answer

很遗憾，无法按照你最初设计的方式使其工作（即通过触发伪事件），浏览器不允许操纵事件。

我想到了一个解决方法，也许对你有用。

查看演示：http://jsfiddle.net/pL3Yj/6/

这个解决方法涉及覆盖左 / 右箭头并手动移动插入符号。