使用 Javascript 隐藏文本框答案

【问题标题】：Keeping Textboxes Hidden using Javascript使用 Javascript 隐藏文本框
【发布时间】：2015-03-16 23:53:24
【问题描述】：

我在一个表单中预定义了 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" />

而有界类型定义为：

对于每个文本框。

【问题讨论】：

标签： javascript jquery html

【解决方案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 更改为让用户知道他可以使用该按钮。

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

【讨论】：

【解决方案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; }
*/

【讨论】：