Question

我有一个包含三十个文本框的页面，其中Id与 _Q0 / _Q1 / _Q2 / _Q3 等大致相关。

我正在尝试设计一个JS代码，它将隐藏除第一个框之外的所有内容，然后在填写前一个文本框时显示下一个文本框。

这是我的代码：

$(function () {
    for(var i=1;i<30;i++){
    var t = i
        document.getElementById("_Q" + t).style.visibility = 'hidden';
    };

    var idNumber = 0
    document.getElementById("_Q"+idNumber).onKeyUp(function(){return boxAdder()});

    function boxAdder(){
        idNumber = idNumber+1;
        document.getElementById("_Q" + idNumber).style.visibility = 'block';
        document.getElementById("_Q" + idNumber).onKeyUp(function(){return boxAdder()});
    };      

});

到目前为止，所有方框都被隐藏，不包括第一个方框。但是，当我写入第一个框时，没有任何反应。我不完全确定这段代码出错的地方。

编辑：示例JSFiddle：http://jsfiddle.net/8b7pH/3/

解决！这是最终的代码：

$(function () {
    for(var i=1;i<=5;i++){
    var t = i;
        document.getElementById("_Q" + t).style.visibility = 'hidden';
       // document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder(t+1);};
    }

    var idNumber = 0;
    document.getElementById("_Q0").onkeyup = function(){console.log("hi"); return boxAdder(0);};

    function boxAdder(numm){
        console.log("ho");
        //idNumber = idNumber+1;
        document.getElementById("_Q" + numm).style.visibility = 'visible';
        document.getElementById("_Q" + numm).onkeyup = function(){return boxAdder(numm+1);};
    }


});

Answer 1

这样做你想要的：

$(function () {
    var $boxes = $("[id^=_Q]").hide().keyup(function(){   //Hide all, then attach keyup
       var i = $(this).index();  //Index of the box being typed
       $boxes.eq(i+1).show();    //Get and show next textbox
    });
    $boxes.first().show();  //Show next textbox
});

顺便说一句$("[id^=_Q]")选择id以_Q开头的所有元素

在这里工作正常：http://jsfiddle.net/edgarinvillegas/8b7pH/7/

干杯

Answer 2

我的建议是你将一个函数分配给文本框的onchange事件，并给每个人一个id，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function textChange(){
    // Get the number of the caller's id
    var inputNumber = $(event.target).attr('id').split("txt")[1];

    // Select the next input by increasing the inputNumber and set its "display" attr to block
    $("#txt" + ++inputNumber).css("display", "block");
}
</script>
<from>
    <input type="text" id="txt1" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt2" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt3" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt4" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt5" onchange="textChange()" />
</form>

可以在这里找到一个工作示例： http://jsfiddle.net/WChd8/

Answer 3

感谢小提琴。我已将updated发给了工作人员。

以下是代码：

$(function () {
    for(var i=1;i<=5;i++){
    var t = i;
        document.getElementById("_Q" + t).style.visibility = 'hidden';
    }

    var idNumber = 0;
    document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder();};

    function boxAdder(){
        console.log("ho");
        idNumber = idNumber+1;
        document.getElementById("_Q" + idNumber).style.visibility = 'visible';
        document.getElementById("_Q" + idNumber).onkeyup = function(){return boxAdder();};
    }


});

重大变化是onkeyup：element.onkeyup = function()的语法。除此之外，还有一堆丢失的分号并不重要。我添加了明显可以删除的console.log。

修改

埃德加发现了一个有效的错误，所以我加了fix。基本上，一旦调用它就立即删除onkeyup事件：

document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();}; function boxAdder(){ idNumber = idNumber+1; document.getElementById("_Q" + idNumber).style.visibility = 'visible'; document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();}; }

请注意两个地方的新this.onkeyup = null;。

Answer 4

这是一种基于您已有的基于javascript的方法，它还会检查输入中写入的内容。如果是空白，则会再次隐藏下一个。

for(var i=0;i<30;i++){
    var element = document.getElementById("_Q" + i);
    if(element != null)
    {
        element.onkeyup = function() {
            var next = parseInt(this.id.replace("_Q", "")) + 1;
            document.getElementById("_Q" + next).style.visibility = (this.value != "" ? "visible" : "hidden");
        }
    }
    if(i>0)
        element.style.visibility = 'hidden';
};

显示隐藏的文本框，因为它们已填充

4 个答案: