How to Break Automatic Line in a Textarea with Javascript or jQuery

Asked

Viewed 830 times

1

I’m sending a message and I want to put the button as if it were inside the textarea, but the problem is that writing goes under the button, there is some way with CSS, javascript or jQuery to avoid this?

Follows the code:

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

javascript jquery css

1 answer

1


Put a padding-right: 60px; in the textarea the text will not reach the button:

$(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;
    padding-right: 60px;
}
<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>

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.