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移动到项目中，我发现随机的无样式文本开始出现。

在检查中，我发现所有输入提交的地方都被包装在新标签中，并向输入"Value"添加未标记的文本==:

<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替换。从头开始创建完全响应式按钮要比更改先前存在的表单元素容易得多。我想不出有哪个jQuery Mobile元素/widget是直接在原生HTML元素上完成的。

如果你不喜欢这个外观和感觉，你可以很容易地禁用它添加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 style:

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

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

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

Answer 2

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

从这里

:

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

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

同样，从这里:

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