【问题标题】:JavaScript or jquery trigger left arrow key press event (Simulate arrow key press)JavaScript 或 jquery 触发左箭头键按下事件(模拟箭头键按下)
【发布时间】:2016-10-07 14:17:25
【问题描述】:

我正在尝试在 rad 网格控件 (Telerik) 内的文本区域中模拟左右箭头键按下。

我有一个特定于浏览器 Firefox 的错误,其中选项卡事件(已修复此部分)和箭头键不起作用。其他所有浏览器都可以正常工作。

因此,作为一种解决方法,我想使用 JavaScript 或 jquery 模拟箭头键。

以下是我使用的选项卡事件修复程序。除此之外,我检查是否按下了键码 37(这是左箭头键)。此时我想在文本区域模拟左箭头按下。

$(document).on('keydown', function (event) {
    if (event.keyCode == 9) {   //tab pressed
        event.preventDefault(); // stops default action
    }
});

$('body').keyup(function (e) {

   var code = e.keyCode || e.which;

   //Left arrow key press
   if (code == '37') 
   {
       moveLeft();// This does not trigger the left arrow event
   }

   //Tab button pressed
   if (code == '9') {
       //shift was down when tab was pressed focus -1
       if (e.shiftKey && code == 9) {                                    
           var focused = $(':focus');
           var inputs = $(focused).closest('form').find(':input');
           inputs.eq(inputs.index(focused) - 1).focus();
       }
       //tab was pressed focus +1
       else {
            var focused = $(':focus');
            var inputs = $(focused).closest('form').find(':input');
            inputs.eq(inputs.index(focused) + 1).focus();                                 
            }
   }      
});

对这个问题的任何帮助将不胜感激

【问题讨论】:

  • 如果您不想自己编写此代码,您可以使用这个库 (craig.is/killing/mice),我认为它可能会帮助您完成所需的工作。

标签: javascript jquery asp.net keydown arrow-keys


【解决方案1】:

我通过将光标向后移动一个空格来完成这项工作,下面是我用来模拟左箭头键按下的代码。

注意 - 模拟正确的关键代码是 39 并将 myval 属性设置为 -1。

$('body').keydown(function (e) {

     var code = e.keyCode || e.which; //Find the key pressed

     if (code == '37') {

          e.preventDefault(); // stop default action
          var elementId = e.target.id;// get id of input text area                                     

          var el = document.getElementById(elementId),
          myval = 1 // set mouse cursor to move back one space
          cur_pos = 0;

          if (el.selectionStart) {
              cur_pos = el.selectionStart;
          } 
          else if (document.selection) {
              el.focus();

              var r = document.selection.createRange();
              if (r != null) {
                  var re = el.createTextRange(),
                  rc = re.duplicate();
                  re.moveToBookmark(r.getBookmark());
                  rc.setEndPoint('EndToStart', re);

                  cur_pos = rc.text.length;
               }
          }

          if (el.setSelectionRange) {
              el.focus();
              el.setSelectionRange(cur_pos - myval, cur_pos - myval);
          }
          else if (el.createTextRange) {
              var range = el.createTextRange();
              range.collapse(true);
              range.moveEnd('character', cur_pos - myval);
              range.moveStart('character', cur_pos - myval);
              range.select();
          }
}

【讨论】:

  • 此代码将插入符号从一个位置移动到上一个或下一个位置。但是当插入符号超出文本框或文本区域的可见区域时,不会滚动到更新的插入符号位置。
最近更新 更多