Jump to content
AlexandreHenrique

textarea com quebra de linha <br>

Recommended Posts

Amigos,

tenho um campo do tipo <textarea>  e estou implementando nesse campo com JS a possibilidade de inserir uma tag  <br> todo vez que o usuário clicar na tecla "Enter". Consegui fazer isso, mas o problema é que o <br> fica visível, não quero isso.  Tentei trocar ' <br />' por  ' \n' e deu certo em parte, pois ele não é visível  no campo textarea, mas quando recupero a informação ele não existe.

Preciso gravar a informação do textarea com os <br>, no entanto não quero que ele seja visível no campo. quero que seja visível somente quando eu for recuperar essa informação.

 

O script é esse:

<textarea name="info" onkeypress="OnEnter(this);" id="enter"></textarea> 
<script>
function OnEnter(){
var x = window.event.keyCode;
    if (x == 13) {
        document.getElementById('enter').value += "<br />";
    }
}
</script>

 

Share this post


Link to post
Share on other sites

Olha, lhe pergunto para que isso?

Uma vez que o textarea já faz a quebra de linha toda vez que a tecla enter é pressionada?

 

Mas só por olhar me parece que você está fazendo correto só que a função depende de 1 parâmetro OnEnter(this) que é a tecla pressionada e aqui você diz que o parâmetro é event

window.event.keyCode.

então sua função não deveria começar assim?: function OnEnter (event) {

Ah e abaixo da condição da tecla não traga retorno usando return false;

 

 

Share this post


Link to post
Share on other sites

Primeiro agradeço pela sua resposta Omar~, obrigado.

Mas respondendo o "para que isso": 

Eu sei que  o textarea já faz a quebra de linha sim, mas ao salvar em BD o texto é gravado sem essas quebras, de modo que ao recuperar ou exibir essa informação na tela, o texto é contínuo, dependendo do números de caracteres ele será exibido em uma linha somente. Eu eu não quero isso.

Quero que,por exemplo, ao digitar o texto:

Lorem Ipsum 
é simplesmente
uma simulação de texto .

seja recuperado do Banco do mesmo modo, com as mesmas quebras de linhas.

Se eu salvar em textarea simples, ao recuperar esse mesmo texto, ele viria assim:

Lorem Ipsum é simplesmente uma simulação de texto.

 Entendeu?

 

Sei que existem vários editores do tipo WYSIWYG, mas pro que eu quero, não seria o ideal, pois preciso somente desse recurso da queba de linha.

 

Obriado pelas dicas, vou corrigir o código

"então sua função não deveria começar assim?: function OnEnter (event) {

Ah e abaixo da condição da tecla não traga retorno usando return false;"

 

 

Share this post


Link to post
Share on other sites

Obg angelorubin, mas não deu muito certo.

Deu certo como Preview, antes de gravar no banco ele exibe com as quebras de linhas, tudo certinho, mas depois que gravo no banco e em seguida recupero esse texto e exibo na tela,  o texto já não tem as quebras de linhas. Vem tudo numa linha só.

Preciso que sempre que eu for consultar esse texto ele venha com as mesmas quebras de linhas. 

 

A única solução que vejo é gravar com <br>.  A pergunta é: como??

Com o JS que fiz, consegui incluir os <br>, o problema é que ele fica visível no textarea.

 

Share this post


Link to post
Share on other sites

Agora deu certinho! 

Valeu angelorubin, obg!

 

Vou só detalhar como ficou para deixar registrado.

 

O JS  foi eliminado.

Ficou somente o <textarea> normal em HTML.

Cada enter dado pelo usuário, uma quebra de linha é criada normalmente com \n .

Ao enviar o formulário para o script PHP, capturo o conteúdo do <textarea> e armazeno numa variável $texto

em seguida vem a "mágica"  usando a função nl2br();

$texto = nl2br($texto);

A função troca o \n por <br />, desse modo minha variável $texto armazena o texto capturado com os <br /> existentes.

Daí é só gravar no banco, e toda vez que consultar as quebras estarão lá;

 

 

Obrigado Omar~ e angelorubin

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By noxer
      Boa tarde, Preciso atribuir o valor de uma textarea para uma var e a exibir em um p. Fiz bem simples usando js/jquery mas agora preciso fazer em php.
       
      Ja tentei $variavel = $_POST['nomedocampo']; mas não obtive resultado
       
       
      Segue o trecho em js
      <textarea class="wapf-input" ></textarea> <button class="sendPDF">PDF</button> <p class="geratedPDF"></p>  
      $('.sendPDF').on('click', toPDF) function toPDF() { var textareaValue = $('.wapf-input').val() $('.geratedPDF').text(textareaValue) }
    • By Hashira do Vento
      O exercício pede o que eu faça um código com uma matriz, onde eu peça uma linha qualquer ao usuário, e nela será feito a soma ou média dos elementos contidos.
      O problema é na hora da decisão do usuário na hora de escolher entre média ou soma, escrevendo a letra inicial de uma dessa palavras em maiúsculo. O "If" simplesmente não funciona, e eu acho que seja essa minha dificuldade, pois quando tirei o if, a soma funcionou normalmente (com o código atual a soma fica igual a zero no printf final). E sim, eu pesquisei a fundo sobre o tipo char, mas mesmo assim não consegui resposta alguma para a solução do meu problema :/
      Segue o código:
      Obs: Claramente, o meu código não está terminado (ainda falta pôr a parte da média), a partir do momento em que eu solucionar esse problema principal, creio que conseguirei finalizá-lo sem mais contratempos.
       
      #include <stdio.h> #include <stdlib.h> #include <locale> int main (void){ setlocale (LC_ALL, "Portuguese"); float M [2][2], media; int lin, x, soma1, soma2; char op[5]; printf ("Preencha a matriz: \n"); for (int l = 0; l<2; l++) { //linha for (int c = 0; c<2; c++ ) { //coluna scanf ("%f", &M[l][c]); } } printf ("Que operação você quer? S ou M?\n"); //Entrada do char, escolha da operação scanf ("%s", op); printf ("Em qual linha da matriz a operação deve ser realizada?\n"); scanf ("%d", &x); for (int l = x; l==x; l++) { for (int c = 0; c<2; c++ ){ printf ("%f \n", M[l][c]);//só mostrando os numeros da linha (ignore) if (op=="S") //tenho quase certeza que o problema se encontra aqui soma1= M[l][c]+soma1; } } printf ("O resultado da soma deu %d", soma1); //e na hora de mostrar a soma, ela sempre aparece como zero }
    • By JurisCode
      Eu tenho um problema de CSS que está me queimando a pestana.
       
      Peguei uma template com um CSS que é verdadeiro ninho de rato, mas de boa, decidi colocar todos os tributos css na própria tag do form. Deu certo em parte porque os campos ficaram do tamanho, cor e outros atributos, mas essas duas caixinhas, nem com todo o espaço do mundo eu consegui colocar elas na mesma linha:
      <div style="display: visible; color: #FFFFFF; border: none; background: #3C3C3C; width: 100%; white-space:nowrap;"> <center>     <input type="text" style="width:120px; height: 20px; padding:1px 1px; background:#DDDDDD; color:#3C3C3C; margin: 0px 0px 0px 0px;"> <input type="password" style="width:120px; height: 20px; padding:1px 1px; background:#DDDDDD; color:#3C3C3C; margin: 0px 0px 0px 0px;"> </center>  </div> nada de mais, em qqr outra página fica em uma única linha, mas nesta página não. Como que anula isso. Nem o nowrap deu jeito.
    • By Infra Comnet
      Estou reaprendendo o javascript desde que entrei no novo trabalho, então estou criando um projetinho simples em html com javascript dentro do html, aí ok. Googleando umas coisas que preciso para associar aos poucos no meu projetinho, encontrei através do site CodePen.io um esboço feito por alguém, daí nele continha a função era o que eu precisava (preencher os campos que automaticamente puxa para o textarea, além de substituir as palavras) , daí peguei as funções e botei no meu código-fonte de html, mas não funcionou em qualquer navegador e achei estranho. acrescentei a linha de script que chama o tal jquery do esboço de onde encontrei, testei e nada. Daí criei meu usuário no CodePen.io, joguei os códigos nele, testei e funcionou... aí achei estranho se funciona no CodePen.io e não funciona nos navegadores.
      Então vou explicar o que acontece: Pelo CodePen.io (acesse neste link com os códigos que fiz: https://codepen.io/InfraComnet/pen/JQbrMV ), o campo Código quando digitado (que será substituído por select para selecionar em vez de digitar números) está puxando conteúdo para a textarea e está ok, e os campos nome e técnico digitados estão substituindo normal. Agora nos navegadores, mesmo digitando nos campos, nada aparece no textarea.
      Um detalhe: como falei antes que estou reaprendendo o javascript, então o jquery é uma coisa nova para mim (não conheço quase nada de jquery, por isso que cacei as funções prontas e pede o src de jquery para funcionar, daí é tenso), então para que as coisas funcionem, eu botei a linha de comando da script de jquery para que possa executar as tarefas funcionando igual ao que acontece no CodePen.io, mas não tá funcionando. Já o outro projetinho que montei, tb usa o jquery (mas diferente deste) e está funcionando. Não sei onde está o erro. E outra, estou usando o Notepad++ pra mim trabalhar nos códigos de html, css e, aos poucos, javascript.
      Veja o código completo abaixo:
      <html> <head><title>SCRIPT COLETA DE INFORMAÇÕES - TESTE</title></head> <!-- Script com link de JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> var dados = [{"codigo": "1", "Nome": ["AVISO PADRÃO / XXXXXX / XXXXXXXX) NÃO CADASTRADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) AUTORIZA CADASTRADO"]},              {"codigo": "2", "Nome": ["LEMBRETE / XXXXXX / XXXXXXXX) AGENDADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) VERIFICAR ORDEM DE SERVIÇO"]},              {"codigo": "3", "Nome": ["REINCIDÊNCIA / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) PROBLEMA REINCIDENTE"]},              {"codigo": "4", "Nome": ["REAGENDAMENTO / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) FEITO NOVO AGENDAMENTO"]},             ]; $('input[name="codigo"]').change(function(){   $('textarea[name="nome pessoal"]').val(pegaNome($(this).val())); }); $('input[name="nome"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `)); }); $('input[name="tecnico"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX',` ${nome} `)); }); function pegaNome(cod){   var nome  = "Não existe na lista"   var nomes = "";      $.each(dados, function(i, val){     if (val.codigo == cod)       {         nome = val.Nome;         $.each(nome, function(index, value){           nomes += value + '\n\n';         });         }     });   return nomes; } String.prototype.replaceAll = function(searchStr, replaceStr) {     var str = this;     searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');     return str.replace(new RegExp(searchStr, 'gi'), replaceStr); }; </script> <body> <!-- Exibindo na página nos navegadores --> <tr>   <td>     Código:<input type="text" name="codigo" size="5">     Cliente: <input type="text" name="nome" size="28"></td></br>     Técnico: <input type="text" name="tecnico" size="28"></br></br>     <textarea name="nome pessoal" rows="10" cols="50"></textarea>   </td> </tr> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.