通過javascript檢查活動元素是否具有特定類

Question

我正在編寫單字段表單，並希望使用Enter鍵將表單前進到下一個輸入字段。 由於頁面上有另一個表單，因此當該表單中的一個輸入是activeElement時，我只希望使用Enter鍵來提升表單。

我用這里看起來非常冗長的if()聲明實現了這個目的：

document.addEventListener( 'keydown', function( ev ) {
        var keyCode = ev.keyCode || ev.which;
        var ids = [ 'this', 'that', 'there', 'thing', 'other' ];
        if ( document.getElementById( ids[0] ) === document.activeElement || document.getElementById( ids[1] ) === document.activeElement || document.getElementById( ids[2] ) === document.activeElement || document.getElementById( ids[3] ) === document.activeElement || document.getElementById( ids[4] ) === document.activeElement) {
            if( keyCode === 13 ) {
                ev.preventDefault();
                self._nextQuestion();
            }
        }
    } );

每個輸入都是相同的類： .questions 。 我嘗試過類似的東西：

document.addEventListener( 'keydown', function( ev ) {
    var keyCode = ev.keyCode || ev.which;
    var ids = [ 'this', 'that', 'there', 'thing', 'other' ];
    if ( document.querySelector('.questions') === document.activeElement) {
        if( keyCode === 13 ) {
            ev.preventDefault();
            self._nextQuestion();
        }
    }
} );

但是，當然，這只會訪問頁面上第一個.questions實例。 我不想迭代節點，因為它似乎沒有比我已經好多了。

我是新手，我正在尋找更簡潔的邏輯。

Answer 1

只需檢查activeElement是否有questions類。

var pattern = /(?:^|\s)questions(?:\s|$)/
if (document.activeElement.className.match(pattern)) {
  ...
}

squint提供了一個改進的正則表達式，它將在類名中考慮更多時髦的情況。

Answer 2

嘗試這個：

if ((" "+document.activeElement.className+" ").indexOf(" questions ") > -1) {
    ...
}

Answer 3

首先，您可以利用classList api來檢查給定className存在的元素，例如document.activeElement && document.activeElement.classList.contains('question') 。

所有提出的方法都非常有用，應該解決問題。 另一方面，您可能希望將應用程序的狀態保存在一個位置，以便您可以輕松管理它。 通過這樣做，您可以使應用程序更具可預測性並且更易於調試。

這是您可能想要采取的方法：

HTML代碼：

<input class="question" value="1"/>
<input class="question" value="2"/>
<input class="question" value="3"/>
<input class="question" value="4"/>
<input class="question" value="5"/>

JavaScript代碼：

var component = {
  activeQuestion: 0,
  questionSelector: '.question',
  get activeQuestionElement () {
    return component.allQuestionElements[component.activeQuestion];
  },
  get allQuestionElements () {
    return document.querySelectorAll(component.questionSelector);
  },
  next: function () {
    var activeElement = document.activeElement;

    if (activeElement && activeElement === component.activeQuestionElement && component.allQuestionElements[component.activeQuestion+1]) {
      component.activeQuestion++;
      component.highlightQuestion();
    }
  },
  highlightQuestion: function () {
    component.activeQuestionElement.focus();
  },
  install: function () {
    document.addEventListener('keyup', function (event) {
      if (event.which === 13) {
        component.next.call(component);
      }
    });
    document.addEventListener('click', function (event) {
      var className = component.questionSelector.slice(1);

      if (event.target.classList.contains(className)) {
        component.activeQuestion = [].slice.call(document.querySelectorAll(component.questionSelector)).indexOf(event.target);
        component.highlightQuestion();
      }
    })
  }
};

component.install();

如上所示， component是一個單獨的對象實例，它包含有用的信息，如activeQuestion索引，問題選擇器，返回DOM元素的一些計算屬性。 install方法綁定事件偵聽器，用於在事件發生時管理狀態。

這是一個演示：

http://jsfiddle.net/maciejsmolinski/xzyvye8z/embedded/result/

當您關注任何字段時單擊“ enter ，它將把焦點移動到下一個字段。 除此之外，單擊任何字段也會更改活動問題。 您可以通過修改我上面發布的代碼輕松地改變行為。 它只是一個基本的骨架，您可以使用它來構建自己的功能。

這是一個非常基本的組成部分。 你可以在它上面構建任何東西。 您可以引入ES6語法（類，箭頭函數， const而不是var ），但我故意將該部分保持不變，以便更容易理解。

希望能幫助到你！

Answer 4

你們用document.activeElement.className向我指出了正確的方向，所以我贊成所有提到它的人，但是這里最簡潔的解決方案似乎是這樣的：

document.addEventListener( 'keydown', function( ev ) {
        var keyCode = ev.keyCode || ev.which;
        // enter
        if ( document.activeElement.className === 'questions') {
            if( keyCode === 13 ) {
                ev.preventDefault();
                self._nextQuestion();
            }
        }
    } );

在我將其標記為答案之前，我會給你們一些時間來批評這個...