使用 iPhone 浏览器处理搜索按钮？答案

【问题标题】：Handling search button using iPhone browser?使用 iPhone 浏览器处理搜索按钮？
【发布时间】：2012-01-26 02:26:27
【问题描述】：

我正在用 asp(mobile) 开发一个 web 应用程序。

当使用 iPhone 浏览器在搜索文本框中输入一些搜索文本 (<mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False></mobile:TextBox>) ， iPhone 启动搜索键盘，当我使用 iPhone 键盘单击搜索按钮时，它会刷新整页，但单击文本框下方的搜索按钮工作正常。

谁能告诉我如何解决这个问题？

这是我目前的代码：

<body>
  <mobile:Form ID="frmSearch" Runat="server" Font-Name="NotSet" Font-Size="Small">
    <mobile:DeviceSpecific ID="dsSearch" Runat="server">
      <Choice Filter="isHTML32">
        <ScriptTemplate>
          <link href="StyleSheets/Common.css" rel="stylesheet" type="text/css"></link>
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <meta id="Meta1" name="viewport" content="width=device-width; initial-scale=1.0;" />
        </ScriptTemplate>
        <HeaderTemplate>
          <table cellspacing="2" width="100%">
            <tr>
              <td width="100%">
                <uc1:Header ID="ucHeader" runat="server" />
              </td>
            </tr>
          </table>
          <table>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td align="right">
                Find :
              </td>
              <td>
                <mobile:DeviceSpecific>
                  <Choice="isHTML32">
                    <ContentTemplate>
                      <asp:DropDownList ID="lstGroups" runat="server"  OnSelectedIndexChanged="LstGroups_SelectedIndexChanged" AutoPostBack="true">
                      </asp:DropDownList>
                    </ContentTemplate>
                  </Choice>
                </mobile:DeviceSpecific>
              </td>
            </tr>
            <tr>
              <td align="right"> Search by:</td>
              <td>
                <mobile:SelectionList ID="lstSearchPreferences" Runat="server" BreakAfter=False>
                  <Item Selected=True Text="select" />
                </mobile:SelectionList>
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>
                <mobile:SelectionList ID="lstSearchOptions" Runat="server" BreakAfter=False>
                </mobile:SelectionList> 
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>
                <mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False>
                </mobile:TextBox>
              </td>
            </tr>
            <tr id="trContractorFilter" runat="server" visible="False">
              <td align="right"> 
                <mobile:Label id="lblContractorFilter" BreakAfter=False Runat="server" Visible="True" >
                  Results:
                </mobile:Label>
              </td>
              <td>
                <mobile:SelectionList ID="lstContractorFilter" Runat="server" BreakAfter="True" Visible ="True" >
                  <Item Selected="True" Text="Active Permits" />
                  <Item Text="All Permits" />
                </mobile:SelectionList>
                (your permits only)
              </td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                &nbsp;&nbsp;&nbsp;
                <mobile:DeviceSpecific>
                  <Choice="isHTML32">
                    <ContentTemplate>
                      <asp:Button ID="btnSearch" runat="server" Text="Search" UseSubmitBehavior=true OnClick="BtnSearch_Click"/>
                    </ContentTemplate>
                  </Choice>
                </mobile:DeviceSpecific>
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <mobile:Label ID="lblError" Runat="server" Font-Bold="True" ForeColor=Red Visible="false" BreakAfter=False></mobile:Label>
              </td>
            </tr>
          </table>
        </HeaderTemplate>
      </Choice>
    </mobile:DeviceSpecific>
  </mobile:Form>
</body>

【问题讨论】：

我对 ASP 不太熟悉，如果我们可以查看生成的实际 HTML 可能会有所帮助。
这听起来像是框架中的一个非常严重的错误。生成的 javascript 表单事件处理程序是什么？
你可以试试 defaultbutton 属性：geekswithblogs.net/ranganh/archive/2006/04/12/74951.aspx
我也不熟悉 ASP，但为什么不直接使用 HTML5 输入 type="search" 输入而不是需要单击的按钮呢？此外，您的一些标签是大写的
标签是大写的，因为它们是 ASP 特定的标签以便于分离（但 html 无论如何对它不敏感）。您是否在 CodeBehind 中使用“BtnSearch_Click”处理搜索功能？如果是这样，您可能必须处理“Enter”事件，并且键盘上的“搜索”按钮似乎只是一个花哨的“Enter”

标签： iphone asp.net html mobile

【解决方案1】：

将mobile:Form 的Action 属性设置为#。这应该会取消表单的默认回发操作，该操作在按下键盘上的搜索按钮时执行。

Ref

【讨论】：

【解决方案2】：

默认情况下，ASP.NET 控件进行整页回发，将页面数据发送到服务器。

要在 asp.net 上处理 AJAX 请求，您应该使用 ScriptManager 和 UpdatePanel 控件或使用 jQuery AJAX 等客户端机制。

【讨论】：

【解决方案3】：

原因是您的搜索按钮实际上并没有触发表单提交，而是触发了一个 JS 函数：onClick="BtnSearch_Click"

BtnSearch_Click 可能会阻止默认操作（提交表单并重新加载页面）发生，这是您需要对表单的默认提交操作执行的操作。

我不熟悉 ASP，所以我可能不太清楚，但你应该可以把一个

onSubmit="Btn_Click"

在表单上，iOS 上的“搜索”按钮将触发。

【讨论】：

【解决方案4】：

结合this question 及其使用jQuery 的答案，您可以在页面中编写相同的代码并在触发提交之前进行客户端处理。

此外，您可以使用$.ajax() 库函数异步提交表单（在上面讨论的代码块内，根本不触发form.submit()），这将消除任何页面刷新（无论表单从哪里提交事件被触发。）

<form id="hello-world" action="sayhello">
<input type="submit" value="Hello!">
</form>

您可以像这样附加事件处理程序：

$('#hello-world').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    /* Validations go here */
    //this.submit(); // If all the validations succeeded
    $.ajax({
         url:'your_form_target',
         data:formData,
         success:function(data,textStatus, jqXHR){

         }
     });
});

【讨论】：