代码之家  ›  专栏  ›  技术社区  ›  LandonSchropp

使用jQuery按下反向箭头键

  •  3
  • LandonSchropp  · 技术社区  · 13 年前

    我正在使用以下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;
      });
    });
    

    这个脚本不起作用。有人知道为什么吗?

    1 回复  |  直到 13 年前
        1
  •  2
  •   techfoobar    13 年前

    好吧,不能让它按照你最初设计的方式工作(即通过触发伪事件),浏览器只是不允许操纵事件。

    我做了一个变通办法,也许对你有用。

    检查 演示 以下为: http://jsfiddle.net/pL3Yj/6/

    解决方案包括覆盖左/右箭头并自己移动插入符号。