Estou fazendo um envio de mensagem e quero colocar o botão como se fosse dentro do textarea, mas o problema é que a escrita passa por debaixo do botão, existe alguma maneira com CSS, javascript ou jQuery de evitar isso?
Segue o código:
$(document).ready(function(){
$("#mostrarMsg").hide();
$('#mensagem').keyup(function(e){
if (e.keyCode == 13){
enviarMensagem();
}
});
});
function enviarMensagem(){
var mensagem = $("#mensagem").val();
if(mensagem == "" || mensagem == " " || mensagem == null){
return;
}else{
$("#mostrarMsg").html(mensagem).show();
$("#mensagem").val('');
}
}
#btnEnviarChat{
position: inherit;
float:right;
margin-top:-50px;
margin-right:10px;
opacity: 0.5;
transition-duration: 1s;
}
#btnEnviarChat:hover{
transition-duration: 1s;
opacity: 0.9;
}
.caixaMensagem{
resize:none;
width:100%;
height:50px;
border:1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<sub>Aperte Enter para enviar</sub>
<sub id="restante"></sub>
<br>
<textarea cols="10" id="mensagem" placeholder="Digite sua mensagem..." class="caixaMensagem"></textarea>
<button id="btnEnviarChat" onclick="enviarMensagem()" class="btn btn-success"><i class="fas fa-paper-plane"></i></button>
<sub id="mostrarMsg"></sub>