Question

我在表单中预先定义了5个文本框。

是否可以使用JQuery / JavaScript：

1。当加载包含表单的页面时，只保留一个文本框 2. 可以有更多链接/按钮来显示其他4个文本框，一次一个。 3. 我们是否可以禁用链接/按钮添加其他文本框，因为只预定了5个文本框。

我在CouchCMS中使用“securefiles”类型。并且必须在前端实现这一目标。

我目前对文本框的前面定义是：

  <cms:input type="bound" name="ibox1" /><br /><br />
    <cms:input type="bound" name="ibox2" /><br /><br />
    <cms:input type="bound" name="ibox3" /><br /><br />
    <cms:input type="bound" name="ibox4" /><br /><br />
    <cms:input type="bound" name="ibox5" />

有界类型定义为：

每个文本框。

Answer 1

当然有可能。您可以为所有预定义输入设置一个div容器，并在创建新输入时将其放在最后一个容器下面。

HTML：

<div id="where_boxes_go">
    <input type="bound" name="ibox1">
    <input type="bound" name="ibox2">
    <input type="bound" name="ibox3">
    <input type="bound" name="ibox4">
    <input type="bound" name="ibox5">
</div>
<span class="more-inputs">Add</span>

CSS

.hidden {
    display: { none; }
}

JQUERY

$(document).ready(function() {
    $(".more-inputs").on("click", function() {
        $(".form").each(function() {
            if( $(this).hasClass("hidden") ) {
                $(this).removeClass("hidden");
                return false;
            }
         });
    });
});

除了第一个之外，这将使你的文字或边界开始隐藏。如果单击“添加”按钮，它将显示下一个按钮。如果没有更多文本框，按钮不会做任何事情就不重要了，如果计数器达到5，你必须在each()函数内检查，然后添加一个类将它的CSS更改为让用户知道他可以使用该按钮的CSS。

演示：http://jsfiddle.net/3sex8mqf/1/

Answer 2

您可以在jQuery中执行以下操作。演示@ fiddle

var $inputs = $("input[type='bound']"), count = 0;
$inputs.first().show();

$(".more").on("click", function(e) {
    e.preventDefault();
    count++;
    $inputs.filter(":eq("+count+")").show();
    if ($inputs.length === count + 1) {
        $(this).hide();
    }
});

HTML：

<input type="bound" name="ibox1" /><br /><br />
    <input type="bound" name="ibox2" /><br /><br />
    <input type="bound" name="ibox3" /><br /><br />
    <input type="bound" name="ibox4" /><br /><br />
    <input type="bound" name="ibox5" />

<button class="more" style="cursor: pointer">Show More</button>

CSS：

input[type="bound"] { display: none; }
/* OR
input { display: none; }
*/

使用Javascript保持文本框隐藏

2 个答案: