用户单击按钮时如何添加额外的文本字段？答案

【问题标题】：How to add an extra textfield when user clicks on a button?用户单击按钮时如何添加额外的文本字段？
【发布时间】：2017-06-07 10:09:30
【问题描述】：

我有这个代码

<input type="text" name="search" placeholder="Author...">

我想要一个按钮，当我点击它时，它应该会显示这个文本字段并且按钮应该消失。

【问题讨论】：

请在提问前阅读，因为您是 stackoverflow 的新手。 stackoverflow.com/help/how-to-ask

标签： html css button input textfield

【解决方案1】：

You may do this simply by using AngularJS. Here is a short example.

var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
$scope.a=1;
$scope.b=null;
$scope.check=function(){
$scope.a=null;
$scope.b=1;
            }});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <body ng-app="myApp" ng-controller="myCtrl">
            <div ng-show="a"><button ng-click="check()">Click</button></div>
            <div ng-show="b"><input></div>
          </div>
        </body>

【讨论】：

【解决方案2】：

您可以为此使用 Javascript / jquery。有很多方法可以做到这一点。这是一个 jquery 的例子

$('#button').click(function(){

 $(this).hide();
 
   var html ='<input type="text" name="search" placeholder="Author...">'
  
  $('#holder').html(html);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">


</div>


<button id="button">Cick to add textbox</button>

使用hide和show的另一种方法

$('#button').click(function(){ 
   $(this).hide(); 
   $('#holder').show();
   
})

#holder{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <input type="text" name="search" placeholder="Author...">
  <select>
      <option>Test</option>
      <option>Test</option>
      <option>Test</option>
      <option>Test</option>
  </select>
</div>


<button id="button">Cick to add textbox</button>

您可以了解更多关于 javascript here

【讨论】：

谢谢，我应该在我的 HTML 页面的哪里添加第一个代码？
@Yoni 你可以在页面底部的标签内添加它
谢谢。如何在
Yoni 你的意思是选择？
我的意思和原来的问题一样，但是是下拉菜单而不是输入字段

【解决方案3】：

HTML：

<input class="input" type="text" name="search" placeholder="Author...">
<button class="btn" type="button">
  click
</button>

CSS：

.input {
  display: none;
}

JS：

$('.btn').on('click', function() {
    $('.input').show();
  $(this).hide();
})

工作示例：https://jsfiddle.net/n05reomv/

【讨论】：

【解决方案4】：

试试这个

<script>

function next(){

document.getElementById("text").hidden=false;
document.getElementById("addBtn").hidden=true;

}
 </script> 

<input type="text" name="search" placeholder="Author..." id="text" hidden="true">
<input type="button" value="Add" onclick="next()" id="addBtn">

【讨论】：