Нажмите на кнопку textarea show submit

Question

Я хочу нажать на 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

OnClick кнопки TEXTAREA будет виден, и 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() } 
}); 

Это будет обрабатывать только то, что вы просили вам нужно будет добавить дополнительные проверки, если текстовое поле теряет фокус и пустая, чтобы повторно скрыть кнопки.

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


};