我无法在 jQuery UI 手风琴内的表单中输入文本

Posted 2023-05-08

【中文标题】我无法在 jQuery UI 手风琴内的表单中输入文本

【英文标题】：I can't input text into my form that is inside a jQuery UI accordion

【发布时间】：2017-07-08 07:17:09

【问题描述】：

正如标题所说，我在 jQuery UI Accordion 内容 div 中有一个带有单个输入和按钮的表单，当我测试它时我无法在其中输入任何文本。我也不能点击按钮。

这是 html：

<button type="button" id="ic-open-report"><i class="fa fa-envelope"></i><p>Export Savings Report</p></buttOn>
                    <div id="ic-savings-report">
                        <h4>Export a PDF Savings Report</h4>
                            <div>
                            <form method="POST" class="savings-report">

                                        <input style="user-select: text;" type="email" id="ic-email"  placeholder="Email">
                                        <button type="submit" >Export</button>
                            </form>
                            </div>
                    </div>

这里是 jQuery：

$('#ic-savings-report').accordion(
    collapsible: true,
    active: false,
    animate: 400
);
$('#ic-savings-report').hide();

$('#ic-open-report').click(function()
    $('#ic-savings-report').toggle(700);
    setTimeout("$( '#ic-savings-report' ).accordion( 'option', 'active', 0       );", 1000);
);

我什至不确定为什么会发生这种情况。为什么我无法编辑输入？

以下是实际项目的链接： http://lcstuff.000webhostapp.com/intellifrost-calculator/

【参考方案1】：

我遇到了这个问题，jquery ui 在这个元素 .ui-widget input 上设置了 font-size: 1em，由于某种原因，这使得文本不可见。所以它给人的印象是我无法输入任何文本，因为我输入时没有显示任何文本。

我只是将它设置为以下来修复它：

font-size: 14px;

【参考方案2】：

只要您正确引用 JQuery 和 JQuery UI，似乎就可以正常工作：

$('#ic-savings-report').accordion(
    collapsible: true,
    active: false,
    animate: 400
);
$('#ic-savings-report').hide();

$('#ic-open-report').click(function () 
    $('#ic-savings-report').toggle(700);
    setTimeout("$( '#ic-savings-report' ).accordion( 'option', 'active', 0       );", 1000);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button type="button" id="ic-open-report">
    <i class="fa fa-envelope"></i>
    <p>Export Savings Report</p>
</button>
<div id="ic-savings-report">
    <h4>Export a PDF Savings Report</h4>
    <div>
        <form method="POST" class="savings-report">
    
            <input style="user-select: text;" type="email" id="ic-email" placeholder="Email">
            <button type="submit">Export</button>
        </form>
    </div>
</div>

【讨论】：

当我尝试你的参考时它仍然对我不起作用。这是项目的链接：lcstuff.000webhostapp.com/intellifrost-calculator。两个绿色浮动按钮的顶部显示“出口储蓄报告”的按钮是带有表格的按钮。

我认为您的问题与此代码无关。我看到问题在于电子邮件字段和按钮位于元素后面，并带有 “输入您自己的制冷系统的值以计算 IntellFrost 可以为您节省多少除霜成本。” 的文本。您需要隐藏该元素以显示其背后的手风琴。

这就是我要去的joyride插件。如果您只是单击那些按钮，它们就会消失。即使我禁用该脚本以使该元素永远不会出现，我仍然无法在文本字段中输入任何内容

同样，问题不在于您在此处显示的特定代码。因为正如我向您展示的那样，它可以正常工作。问题一定是这段代码如何与页面中的其他代码交互。

我发现了问题所在，它与代码中的其他内容有关。在 CSS 中。谢谢