Jump to content
Alberto Nascimento

Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?

Recommended Posts

Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?

    <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>


Se eu pressiono ENTER automaticamente envia o formulário

Como então consigo digitar ao preencher o formulário da forma abaixo?

Citar

Quero usar o campo
texto inserindo várias
linhas neste formato
que esta sendo
apresentado.

 

Share this post


Link to post
Share on other sites

Primeiramente a tag <input> não serve para sua questão use a tag <textarea>

 

Acontece que nesse termo você precisará o Javascript para interver no HTML.

Você precisará remover o comportamento padrão do submit do fomulário no html

Exemplo:

<form method="POST" onsubmit="return(false);">

Ou seja quando a key "enter" for pressionada não há retorno do form.

No entanto para enviar os dados do formulário também precisará do javascript para capturar os valores de cada elemento do formulário.

Sugiro que utilize esse script de desenvolvimento meu mesmo:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

 

Mas, também pode user detecção de evento ao form no caso keypress e se for o enter dar um retorno falso assim sendo essa tecla não submete o formulário.

Share this post


Link to post
Share on other sites
Em 26/07/2020 at 00:25, Omar~ disse:

Primeiramente a tag <input> não serve para sua questão use a tag <textarea>

 

Acontece que nesse termo você precisará o Javascript para interver no HTML.

Você precisará remover o comportamento padrão do submit do fomulário no html

Exemplo:


<form method="POST" onsubmit="return(false);">

Ou seja quando a key "enter" for pressionada não há retorno do form.

No entanto para enviar os dados do formulário também precisará do javascript para capturar os valores de cada elemento do formulário.

Sugiro que utilize esse script de desenvolvimento meu mesmo:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

 

Mas, também pode user detecção de evento ao form no caso keypress e se for o enter dar um retorno falso assim sendo essa tecla não submete o formulário.

 

Como consigo então "colar" o texto neste formato? Seria mais complicado ainda ou seria mais fácil?

 

Tipo, ao invés de pressionar ENTER eu apenas iria COLAR o texto no campo e já ficar com a formatação de parágrafo.

Share this post


Link to post
Share on other sites

Acho que você pode usar o placeholder que é o texto padrão de um input

 <input type="text-area" placeholder="Aqui você digita o texto">

 

Ai para colocar em paragrafros é só definir um limite de largura e altura pra sua text-area ai acredito que o texto vai quebrar a linha.

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 AlexandrePrezzi
      Preciso de uma ajuda....
       
      Tenho um código que gera um botao  dropdown e dentro dele gera um segundo nivel....
       
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece 
       
      Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)

      Mas supondo que eu clique em "Primeiro"  (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
      e isso acaba deixando empilhado..
       
      Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche)  e vice-versa.
       
      Na imagem coloquei o q esta acontecendo.....

    • By henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • By João Carlos de Jesus
      Eu queria que opacity só funcionasse no id direcionado, menos na imagem
       
      <style> #test:not(.teste){ color:blue; -webkit-opacity:0.5; } </style> <div id="test"> <div> <h2>Olá</h2> </div> <img class="teste"src="https://www.prestus.com.br/wp-content/uploads/2018/07/script-de-atendimento-1-1024x683.jpg"style="width:100px;height:100px;"/> </div>  
       
    • By Nicole Hawkins
      I wanted to know if it is possible to change all the fonts of a site in html?
    • By Sapinn
      Tenho um código de um balão de borda feito com html e css mas gostaria de saber como fazer para colocar a seta que está virada para baixo em cima do balão
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              body {
          padding: 140px 10px;
          text-align: center;
      }
      /* Criando o balão */
      .bubble {
          background-color: #fff;
          border: 2px solid #333;
          border-radius: 5px;
          color: #333;
          display: inline-block;
          font: 16px/24px sans-serif;
          padding: 12px 24px;
          position: absolute;
      }
      /* Criando o triângulo */
      .bubble.active:after,
      .bubble.active:before {
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 15px solid #fff;
          bottom: -15px;
          content: '';
          left: 80%;
          margin-left: -15px;
          position: absolute;
      }
      /* Criando a borda do triângulo */
      .bubble.active:before {
          border-left: 18px solid transparent;
          border-right: 18px solid transparent;
          border-top: 18px solid;
          border-top-color: inherit;
          bottom: -18px;
          margin-left: -18px;
      }
          </style>
      </head>
      <body>
          <span class="bubble active">Balão com borda</span>
      </body>
      </html>
       
×

Important Information

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