jQuery Accordion 如何输入以选择活动标题的按钮

Question

我在对话框中使用手风琴来完成最终用户需要执行的不同步骤。每个步骤都有一个按钮或带有按钮的文本框。我怎样才能得到它，以便当用户按下回车键时，它会激活与活动标题关联的按钮。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<div id="accordion">

    <h3 id="Step1">Step 1:</h3>
  <div>
    <p>
    To get started click "Setup" and it will configure this spreadsheet for use with the Connected Groups Add-on.
    </p>

    <p><button id="Step1B" class="action" onclick="step1()">Setup</button></p>
  </div>

  <h3 id="Step2">Step 2</h3>
  <div>
    <p>
    To get started enter the name of your first contact group below then click "Create". 
    </p>
    <p><input type="text" id="gName">
    <button id="Step2B" class="action" onclick="step2()">Create</button></p>
  </div>
  <h3  id="Step3">Done</h3>
  <div>
    <p><center>
    Thank you for using Connected Groups.  More information or help can be found:
    </center>
    </p>
    <p><button id="thankYou" onclick="step3()">Close</button></p>
  </div>

</div>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <script>
 $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content"
    });  
  }); // run on launch

  function step1(){
  alert("Step1");
  $('#Step2').click(); 
  };

    function step2(){
    var tb = $("#gName").val();
  alert("Step2: "+tb);
  $('#Step3').click(); 
  };

   function step3(){
  google.script.host.close();
  };

  </script>

Answer 1

我怎样才能得到它，以便当用户按下回车键时，它会激活与活动标题关联的按钮？

首先，我们可以捕获输入元素的按键事件。如果按键是“输入”键，那么我们将向“活动”按钮发送click()。我们会将其存储在一个全局变量window.actionButton。

$(':input').keyup(function (event) {
    if (event.keyCode == 13) {
        window.actionButton.click();
    }
});

如果我们假设每个面板都包含一个带有class='action' 的按钮，那么我们可以跟踪“活动”按钮。

window.actionButton = ui.newPanel.find(".action");

activate 事件在标题（+ 面板）被选中时触发。在页面加载期间，我们将绑定一个函数到该操作，并让它更新window.actionButton。

activate: function (event, ui) {
    window.actionButton = ui.newPanel.find(".action");
},

如果我们移动焦点以突出显示预期的操作，则工作流程会得到改善。理想情况下，焦点应该转到下一个输入，不管是什么，但在这个简单的手风琴中，移动到适当的按钮就足够了：

window.actionButton.focus();

不幸的是，当在 Google Apps Script HtmlService 中运行时，我们可以针对编程按钮单击但无法控制焦点：Cannot simply force focus on text input in stand-alone Google App using HtmlService? 您会发现 jsFiddle 的运行方式与在 HtmlService 中运行时不同。

脚本

Working jsFiddle.

<div id="accordion">
     <h3 id="Step1">Step 1:</h3>

    <div>
        <p>To get started click "Setup" and it will configure this spreadsheet for use with the Connected Groups Add-on.</p>
        <p>
            <input type="button" id="Step1B" class="action" value="Setup" />
        </p>
    </div>
     <h3 id="Step2">Step 2</h3>

    <div>
        <p>To get started enter the name of your first contact group below then click "Create".</p>
        <p>
            <input type="text" id="gName" />
            <button id="Step2B" class="action">Create</button>
        </p>
    </div>
     <h3 id="Step3">Done</h3>

    <div>
        <p>
            <center>Thank you for using Connected Groups. More information or help can be found:</center>
        </p>
        <p>
            <button id="thankYou" class="action">Close</button>
        </p>
    </div>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
  /**
   * On document load, set up accordion & event handlers
   */
  $(function() {
     $("#accordion").accordion({
         heightStyle: "content",
         // Handle activate event by setting a new "actionButton", 
         // and putting it into focus.
         activate: function (event, ui) {
             //alert(ui.newPanel.attr('id'));
             window.actionButton = ui.newPanel.find(".action");
             window.actionButton.focus();
         },
         // Likewise for create event
         // This doesn't set focus - why not?
         create: function  (event, ui) {
             //alert(ui.panel.attr('id'));
             window.actionButton = ui.panel.find(".action");
             window.actionButton.focus();
         }
     });

     // Click handlers, assigned upon load
     $('#Step1B').click(function () {
         alert("Step1");
     });

     $('#Step2B').click(function () {
         var tb = $("#gName").val();
         alert("Step2: " + tb);
     });

     $('#Step3').click(function () {
         google.script.host.close();
     });

     // Setup keypress event handler for all inputs 
     // If 'enter' is pressed, click the current actionButton.
     $(':input').keyup(function (event) {
         if (event.keyCode == 13) {
             window.actionButton.click();
         }
     });
  });

</script>