Question

我想点击show submit按钮后点击textarea。我的代码在这里：https://jsfiddle.net/tuudvj9m/

<div class="panel">
    <form action="" mathod="post" class="panel-body panel-300">
        <textarea class="form-control expandable" type="text" id="myIn" placeholder="Write a Review" rows="2"></textarea><br />
        <input type="button" class="btn btnshow" value="Save" />&nbsp;&nbsp;
        <input type="button" class="btn btnshow" value="Cancle" />
    </form>      
</div>

.panel textarea.expandable {
    height:40px;
    -webkit-transition: all 0.5s ease-in-out;
}
textarea.expandable:hover, 
textarea.expandable:focus {
    height: calc(100% - 90px);      
    -webkit-transition: all 0.8s ease-in-out;
}
.panel-300:hover, 
.panel-300 {
    height: 200px;    
} 
textarea.expandable + textarea.expandable:hover, 
textarea.expandable + textarea.expandable:focus {
    height: calc(100% - 90px)   
}

Answer 1

将显示textarea按钮的onclick，并且取消按钮的onclick将不可见

$(document).ready(function() {
  $("#myIn").on('click', function() {
    $("#saveBtn").show();
    $("#cancelBtn").show();
  });

  $("#cancelBtn").on("click", function() {
    $("#saveBtn").hide();
    $("#cancelBtn").hide();
  });
});

HTML

<div class="panel">
  <form action="" mathod="post" class="panel-body panel-300">
    <textarea class="form-control expandable" type="text" id="myIn" placeholder="Write a Review" rows="2"></textarea>
    <br />
    <input type="button" class="btn btnshow" id="saveBtn" value="Save" style='display:none;' />&nbsp;&nbsp;
    <input type="button" id="cancelBtn" class="btn btnshow" value="Cancle" style='display:none;' />
  </form>
</div>

Answer 2

这就是我这样做的方式。

$(document).ready(function() {
  $('.btnshow').hide();

  $('#myIn').focusin(function() { $('.btnshow').show() }
});

如果textarea失去焦点并且空白以重新隐藏按钮，那将只处理您要求的添加额外验证所需的内容。

Answer 3

使用javascript的简单方法... HTML代码

<form action="" mathod="post" class="panel-body panel-300">
 <textarea class="form-control expandable" type="text" id="txtarea" placeholder="Write a Review" rows="2"></textarea><br />
                                                                         <input type="button" class="btn btnshow" value="Save" id="btnsave" />&nbsp;&nbsp;<input type="button" class="btn btnshow" value="Cancle" />
 </form>

JS代码

window.onload = function() {
     var tt = document.getElementById('txtarea');
var btnsave = document.getElementById('btnsave');
tt.onclick = function(){btnsave.style.display='block';}


};

单击textarea show提交按钮

3 个答案: