Question

我有一个带有keydown事件的textarea，当我输入textarea并将光标放在中间并向右移动箭头时突出显示下一个字母，是否有可能不突出显示下一个字母？对于左箭头，它工作正常，它不突出显示字母。提前谢谢。

<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
  <div class="row">
   <textarea name="text" id="text" cols="30" rows="10" ng-keydown="keyPress();"></textarea>
</div>
</div>
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(scope) {
  scope.keyPress = function(){
     var code = event.which;
       if (code == 37) {
            event.preventDefault();
            document.activeElement.selectionStart--;
            document.activeElement.selectionEnd--;
        }
        if (code == 39) {
            event.preventDefault();
            document.activeElement.selectionStart++;
            document.activeElement.selectionEnd++;
        }
  }
}]);

Answer 1

在您按下左箭头键的代码中，您将递减selectionStart和selectionEnd两个属性。当您将光标放在字符串的中间时，selectionStart和selectionEnd都将相等，即光标前面的字符位置。所以我们说selectionStart=4和selectionEnd=4，所以当你递减selectionStart它变为3然后递减selectionEnd时它也会变成3所以它们都是selectionStart指向同一位置因此没有选择。但是在右箭头按下它的作品有点不同，当你增加5它变为selectionEnd时它也会增加selectionEnd的值，因为selectionStart永远不会小于selectionEnd {1}}（因为结束不能落后于开始）所以5变为selectionEnd然后递增6它将变为selectionStart=5所以现在你有selectionEnd=6和document.activeElement.selectionEnd++;。因此，您根据此选择了一个字符，从而选择了行为。

因此，为了达到您想要的效果，您可以在右箭头按下处理程序中注释掉angular.module('myApp', []) .controller("Ctrl_List", ["$scope", function(scope) { scope.keyPress = function(){ var code = event.which; if (code == 37) { event.preventDefault(); document.activeElement.selectionStart--; document.activeElement.selectionEnd--; } if (code == 39) { event.preventDefault(); document.activeElement.selectionStart++; //document.activeElement.selectionEnd++; } } }]);代码行。 Belwo是一个演示

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
  <div class="row">
   <textarea name="text" unselectable="on" id="text" cols="30" rows="10" ng-keydown="keyPress();"></textarea>
</div>
</div>

＆＃13;

#include <stdlib.h>
#include <stdio.h>

typedef struct Node Node;

struct Node
{
    int data;
    Node *prev;
    Node *next;
};

static Node *removeNode(Node *head, int d)
{
    Node *curr = head;
    while (curr != NULL)
    {
        if (curr->data != d)
            curr = curr->next;
        else
        {
            if (curr->prev != NULL)
                curr->prev->next = curr->next;
            else
                head = curr->next;
            if (curr->next != NULL)
                curr->next->prev = curr->prev;
            free(curr);
            return head;
        }
    }
    return head;
}

static Node *addNodeAtHead(Node *head, int d)
{
    Node *item = malloc(sizeof(*item));
    if (item != 0)
    {
        item->next = head;
        item->prev = NULL;
        if (head != 0)
            head->prev = item;
        item->data = d;
    }
    return item;
}

static void dumpList(const char *tag, Node *head)
{
    printf("%s:", tag);
    while (head != 0)
    {
        printf(" %d", head->data);
        head = head->next;
    }
    putchar('\n');
}

int main(void)
{
    Node *head = 0;
    head = addNodeAtHead(head, 23);
    head = addNodeAtHead(head, 43);
    head = addNodeAtHead(head, 73);
    head = addNodeAtHead(head, 13);
    head = addNodeAtHead(head, 33);
    dumpList("Full", head);

    head = removeNode(head, 33);
    dumpList("Lost 33", head);
    head = removeNode(head, 23);
    dumpList("Lost 23", head);
    head = removeNode(head, 13);
    dumpList("Lost 13", head);
    head = removeNode(head, 34);
    dumpList("Lost 34", head);
    head = removeNode(head, 43);
    dumpList("Lost 43", head);
    head = removeNode(head, 73);
    dumpList("Lost 73", head);
    head = removeNode(head, 37);
    dumpList("Lost 37", head);

    return 0;
}

＆＃13;

MDN SelectionStart

MDN SelectionEnd

希望这会有所帮助：）

Answer 2

对于我在评论中的跟进问题，我设法做到了这一点。

if (code == 37) {
            document.activeElement.selectionEnd--;
              var test = false;
             if(test == false){
            //  document.activeElement.selectionStart--;
              document.activeElement.selectionEnd--;
              if(document.activeElement.selectionStart == 0){
                 test = true;

                 document.activeElement.selectionEnd = 0;
                 document.activeElement.selectionStart = 0;
              }
        }

当右箭头按下javascript时，避免突出显示下一个字母

2 个答案: