使用javascript添加新文本框

我有一个网页。有一个叫做add的按钮。点击此添加按钮后，必须添加1个文本框。这应该只发生在客户端。我想让用户最多添加10个文本框。使用javascript添加新文本框

如何使用javascript实现它？

例如：显示

只有1个文本框
用户点击Add>
2个文本框中显示
用户单击Add>

我还希望提供一个叫做“删除”的按钮，用户可以通过该按钮删除多余的文本框

任何人都可以为我提供一个JavaScript代码？

来源

2009-08-09 user93796

你使用jQuery或其他一些JavaScript框架？ – opHASnoNAME 2009-08-09 10:17:39

你是什么意思的文本框，你的意思是asp.net文本框控件？ – 2009-08-09 10:31:47

@Amr - OP在客户端指定。这是如何意味着一个asp.net文本框？ – redsquare 2009-08-09 10:33:33

未经测试，但这应该工作（假设存在正确的id的元素）;

var add_input = function() { 

    var count = 0; 

    return function add_input() { 
     count++; 
     if (count >= 10) { 
      return false; 
     } 
     var input = document.createElement('input'); 
     input.name = 'generated_input'; 
     document.getElementbyId('inputs_contained').appendChild(input); 
    } 

}(); 

add_input(); 
add_input(); 
add_input();

来源

2009-08-09 10:39:59 Quentin

可以ü认为giv细节代码沿着机智html.I不熟悉javascript – user93796 2009-08-09 11:44:01

使用jQuery框架的一个解决方案：

<form> 
<ul class="addedfields"> 
<li><input type="text" name="field[]" class="textbox" /> 
<input type="button" class="removebutton" value="remove"/></li> 
</ul> 
<input type="button" class="addbutton" value="add"/> 
</form>

jQuery的脚本代码：

$(function(){ 
    $(".addbutton").click(){ 
    if(".addedfields").length < 10){ 
     $(".addedfields").append(
     '<li><input type="text" name="field[]" class="textbox" />' + 
     '<input type="button" class="removebutton" value="remove"/></li>' 
     ); 
    } 
    } 

    // live event will automatically be attached to every new remove button 
    $(".removebutton").live("click",function(){ 
    $(this).parent().remove(); 
    }); 
});

注：我没有测试的代码。

编辑：改变错误的引号

来源

2009-08-09 10:41:48 Scharrels

该OP问的JavaScript。不是jQuery解决方案。下次查看标签以获取此信息！ – redsquare 2009-08-09 11:24:20

尽管我不喜欢“使用jQuery！”的普遍性，作为一切与js相关的stackoverflow的答案 - jQuery *是* JavaScript。 – Quentin 2009-08-09 11:41:48

我希望你使用jQuery。

<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"><!-- 


    $(document).ready(function(){ 

    var counter = 2; 
    $("#add").click(function() { 
    if(counter==11){ 
     alert("Too many boxes"); 
     return false; 
    } 
     $("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n"); 
     ++counter; 
    }); 

    $("#remove").click(function() { 
    if(counter==1){ 
     alert("Can u see any boxes"); 
     return false; 
    } 
     --counter; 
     $("#d"+counter).remove(); 
    }); 
    }); 
// --></script> 
</head><body> 

<div id='textBoxes'> 
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div> 
</div> 
<input type='button' value='add' id='add'> 
<input type='button' value='remove' id='remove'>

来源

2009-08-09 10:43:07

使用javascript添加新文本框

回答

相关问题