Question

这个让我疯了，我不知道问题是什么。

我有一个测验，有不同类型的问题类型（多项选择，在答案中输入等），对于每个问题，我使用函数设置innerHTML，然后相应地填充它。

如果是文本框问题，我想自动将焦点设置为它。我尝试过在Chrome中使用javascript，jQuery和控制台窗口。我已将选项卡索引设置为-1。我看过这个网站，但没有一个解决方案似乎有用。

以下是代码：

function populate(){
    render_HTML(session.getCurrentItem().itemType);
    if(session.getCurrentItem().itemType === "multiple choice"){
      //multiple choice 
    }
    else if(session.getCurrentItem().itemType === "typing"){
      var element = document.getElementById("questionTest");
      element.innerHTML = session.getCurrentItem().primaryText;
      console.log("set text");
      $( "#inputBox" ).focus();
    }
}

.typing .typing-wrapper {
    position: relative;
    margin-top: 10px
}

.typing .typing-wrapper .typing-box {
    width: 100%;
    padding: 5.7px 23px;
    height: 57px
}

.typing .typing-wrapper .typing-box:focus {
  outline: 0;
}

<div class="central-area" id="central-area">
  <div class="main typing">
    <button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
    <div class="next-text">
      Next
    </div></button>
    <div class="question-row row column">
      <div class="graphic"></div>
      <div class="question-text" id="questionText">
        to leave
      </div>
    </div>
    <div class="hint row column">
      <span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
    </div>
    <div class="alert alert-warning typing-alert"></div>
    <div class="typing-wrapper">
      <span class="marking-icon"></span>
      <input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
    </div>
  </div>
</div>

Answer 1

function populate(){
    render_HTML(session.getCurrentItem().itemType);
    if(session.getCurrentItem().itemType === "multiple choice"){
      //multiple choice 
    }
    else if(session.getCurrentItem().itemType === "typing"){
      var element = document.getElementById("questionTest");
      element.innerHTML = session.getCurrentItem().primaryText;
      console.log("set text");
      $( "#inputBox" ).focus();
    }
}

.typing .typing-wrapper {
    position: relative;
    margin-top: 10px
}

.typing .typing-wrapper .typing-box {
    width: 100%;
    padding: 5.7px 23px;
    height: 57px
}

.typing .typing-wrapper .typing-box:focus {
  outline: 0;
}

<div class="central-area" id="central-area">
  <div class="main typing">
    <button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
    <div class="next-text">
      Next
    </div></button>
    <div class="question-row row column">
      <div class="graphic"></div>
      <div class="question-text" id="questionText">
        to leave
      </div>
    </div>
    <div class="hint row column">
      <span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
    </div>
    <div class="alert alert-warning typing-alert"></div>
    <div class="typing-wrapper">
      <span class="marking-icon"></span>
      <input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
    </div>
  </div>
</div>

无法使用javascript将焦点设置为教科书

1 个答案: