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

Question

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

我已经为我的用户设置了注册表单。 它运行良好，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 注册”文本吗？我该如何阻止它？

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

Answer 1

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

现在让我回答你的问题。 jQuery Mobile，就像许多其他移动框架一样，有自己的一组小部件，包括定制的表单元素。您看到的只是普通按钮的 jQuery Mobile 替代品。从头开始创建完全响应的按钮然后更改预先存在的表单元素要容易得多。我想不出任何直接在 native 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 (搜索名为:Methods of markup enhancement prevention 的章节)。

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