Question

在提供源文件时，以下角度形式正确呈现，按下时按钮正确提交（我缩小了表单的大小以保持简洁）

<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
    <fieldset class="form-group">
        <label class="control-label col-md-2" for="price">Price:</label>
        <div class="col-md-10">
            <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
        </div>
    </fieldset>

    <fieldset>
        <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
    </fieldset>                            
</form>

但是在缩小（使用Grunt和Usemin）并从Dist文件夹提供缩小的文件后，表单输入正确呈现，但提交按钮根本不存在。

dist / scripts / script的相关部分。*******。js显示按钮html仍然存在

a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n                                <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n                            </fieldset>\r\n                            \r\n                        </form>

显然，Grunt缩小已将按钮发送到dist文件夹，但它不会在chrome或firefox或heroku中呈现。

我可以指出的唯一奇怪的事情是这些奇怪的空间被插入到构建文件中，还有一堆换行符和回车符。

如果这是罪魁祸首，可以做些什么？另外，为什么grunt文件会在按钮周围插入空格？它也在其他几个方面做到了。但无论如何，手动删除空格和换行符似乎无法解决问题

在另一个非常相似的形式中，按钮在缩小后也不会渲染。在缩小的脚本文件的该部分中还插入了一些空格。应用程序中的所有其他按钮在缩小后呈现并正常运行

我的编辑器是Visual Studio Code

请帮我看看我做错了什么！

Answer 1

我解决了问题

其中一个输入字段是一个小错误。实际上，不是我上面发布的那个。

我用旧的输入标签的方式写了一个textarea标签，作为一个自动关闭的标签

<textarea something something /></textarea>

未经证实，这被解释为我的意图，因此当然从未检测到错误

但在缩小过程中它被缩减为

<textarea something something />

从未正确关闭，因此删除了一些后续的块

所以我想我可以概括一下：

html解析器可以在缩小之前处理一些错误，但缩小解析器可能会以不同方式处理错误，之后可能会出现错误

所以任何奇怪的缩小后错误都应该导致仔细审查html以确保正确的标签格式

html grunt-minified角形表单提交按钮无法渲染（节点）

1 个答案: