javascript - 单击上一个文本字段时创建一个新的文本字段

Question

我想在单击已创建的文本字段时创建一个新的文本字段。我已经编写了可用的函数，但问题是，它应该只在单击最后一个文本字段时创建一个新的文本字段，例如，如果有三个文本字段并且单击前两个不会添加新的文本字段。只有点击第三个文本字段才能创建一个新的。使用以下代码无法正常工作(它是一个 Java 脚本函数):

    var FieldCount=1;
    function addInputField(count)  //on add input button click
    {           

        alert(FieldCount);
        alert(count);
         if(FieldCount == count) 
        {

            FieldCount++; 


            var field = "#textfield_"+count;

            $node = '<input id="textfield_'+FieldCount+'" type="text" name="textfield"    onClick="addInputField(FieldCount);" />';
            $(field).after($node);

        }

    };

当页面加载时，begging 中只有一个文本字段:

    <input id="textfield_1" type="text" name="textfield" onClick="addInputField(FieldCount);" />

Answer 1

文本框点击后需要解绑点击事件

HTML:

<input id="textfield_1" type="text" />

Javascript:

$(document).ready(function () {
    $("#textfield_1").click(function () {
        addInputField(FieldCount);
    });
});

var FieldCount = 1;

function addInputField(count) //on add input button click
{

    //alert(FieldCount);
    //alert(count);
    if (FieldCount == count) //max input box allowed
    {

        FieldCount++; //text box added increment
        //add input box

        var field = "#textfield_" + count;


        $node = '<input id="textfield_' + FieldCount + '" type="text" name="textfield" />';
        $(field).unbind("click").after($node);

        $('#textfield_' + FieldCount).click(function () {
            addInputField(FieldCount);
        });

        //text box increment
    }

};

工作示例:http://jsfiddle.net/bz5q4/

您还可以使用 focus 而不是 click 来确保如果用户使用 tab 键进入该字段，则会创建另一个字段。