Jquery Mobile 自动在我的“<input type=submit"> 上方添加文本，我该如何防止这种情况发生？答案

【问题标题】：Jquery Mobile is adding text above my "<input type=submit"> automatically, how do i prevent this?Jquery Mobile 自动在我的“<input type=submit"> 上方添加文本，我该如何防止这种情况发生？
【发布时间】：2014-06-11 15:20:58
【问题描述】：

我刚刚开始为我的一个网站开发移动版本。

我已经为我的用户设置了注册表单。它工作正常，CSS 样式正确。

@using (Html.BeginForm("XXX", "Registration", FormMethod.Post, new { @class = "twitter-sign-in-container" }))
{
    <input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button" />
}

一旦我将 Jquery mobile 添加到项目中，如果发现随机的无样式文本开始出现。

经过检查，我发现所有输入提交都包含在新标签中，并将未标记的文本 == 添加到输入“值”：

<form action="/registration/xxx" class="twitter-sign-in-container" method="post">
    <div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
            "Sign in with Twitter"
            <input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button">
    </div>
</form>

是否有人知道为什么要添加“使用 twitter 注册”文本，以及我如何阻止它？

PS 不太重要，但我也想知道为什么 Jquery 将表单内容包装在下面的 div 中。

【问题讨论】：

标签： c# css forms jquery-mobile razor

【解决方案1】：

首先，让我给你一个一般性的建议，在使用任何框架之前（至少是第一次），你至少应该看一下框架的官方文档。在这种情况下，它会节省您发布此问题的时间。

现在让我回答你的问题。 jQuery Mobile 与许多其他移动框架一样，拥有自己的一组小部件，包括定制的表单元素。你看到的只是普通按钮的 jQuery Mobile 替代品。从头开始创建完全响应的按钮然后更改预先存在的表单元素要容易得多。我想不出任何直接在原生 HTML 元素上完成的 jQuery Mobile 元素/小部件。

如果您不喜欢这种外观和感觉，您可以通过将 data-role="none" 添加到输入按钮来轻松禁用它。如果您想看到不同之处，请看这里：http://jsfiddle.net/Gajotres/vds2U/83/

经典：

<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button" data-role="none"/>

jQuery Mobile 风格：

<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button"/>

当然还有其他防止标记增强的方法，但这不是这个问题的重点，如果你想了解更多，请查看here（搜索章节名称：标记增强预防方法）。

关于您的最后一个问题，并非所有内容都包含在这种 div 容器（.ui-button）中，还有很多其他内容。如果您想查看其他可能的表单/页面元素（小部件），请查看 here。

【讨论】：

【解决方案2】：

我相信 jQuery Mobile 这样做是出于可访问性的原因：

来自here：

为了便于访问，jQuery Mobile 要求所有表单元素都与一个有意义的标签配对。要隐藏标签以使其对辅助技术可见 - 例如，当让元素的占位符属性用作标签时 - 将帮助器类 ui-hidden-accessible 应用于标签本身：

<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>

另外，来自here：

要收集标准字母数字文本，请使用带有 type="text" 属性的输入。设置标签的 for 属性以匹配输入的 id，以便它们在语义上关联。如果在页面布局中不需要标签，可以将其隐藏起来，但出于语义和可访问性原因，我们要求它出现在标记中。

【讨论】：