jQuery 手风琴如何获得输入选择按钮的活动标题.

jQuery Accordion how to get enter to select button for active heading

本文关键字：按钮 活动 标题 选择 输入 手风琴 何获得 jQuery      更新时间：2023-09-26

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

<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>

我怎样才能获得它，以便在用户点击回车键时激活与活动标题关联的按钮？

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

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

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

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

每当选择标头（+ 面板）时，都会触发激活事件。在页面加载期间，我们将一个函数绑定到该操作，并让它更新window.actionButton。

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

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

window.actionButton.focus();

不幸的是，当在Google Apps Script HtmlService中运行时，我们可以定位编程按钮单击，但无法控制焦点：不能简单地使用HtmlService强制将焦点放在独立Google App中的文本输入上吗？因此，您会发现 jsFiddle 的操作与在 HtmlService 中的操作不同。

脚本

工作 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>
相关文章：