Question

我有这段代码

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

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

Answer 1

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

＆＃13;

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;
            }});

＆＃13;

<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>

＆＃13;

Answer 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

Answer 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/

Answer 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">

如何在用户点击按钮时添加额外的文本字段？

4 个答案: