5

Bom dia pessoal.

Estou fazendo um formulário, e queria fazer um <input type='text' /> que o usuário pudesse definir a largura, com aquele drag resize que existe no textarea.

Quero inserir esse recurso em um trecho simples como:

<p>Declaro para os devidos fins que eu <input type="text" name="nome" placeholder="Insira seu nome"></p>

É possível isso? Tentei adicionar no css um resize: both, ou mesmo um resize: horizontal no input mas não funcionou.

input {
    resize: horizontal;
    overflow: auto;
}

Tentei utilizar o textarea permitindo apenas o resize horizontal, mas o mesmo não se alinha ao restante como o input

Comportamento com o input

Efeito com o input


Comportamento com textarea Efeito com textarea

Agradeço desde já pessoal. Boa semana à todos

0

2 Respostas 2

5

Diretamente num input não, mas você pode usar um container:

span {display:inline-block;resize:both;overflow:hidden;padding-right:20px;border:1px solid red}
input {margin-right:20px;width:100%;height:100%;border:1px solid blue}
<span><input type="text" value="fake resize"></span>

A borda é só para facilitar a visualização. Note que inseri um padding para ficar mais fácil de puxar o canto sem afetar o texto, mas pode remover se quiser.

5
  • Apesar de, no contexto dessa pergunta, não ser uma boa ideia usar <div> dentro de uma tag <p> (List of HTML5 elements that can be nested inside P element?), eu acho que é uma solução mais prática para casos genéricos do que o uso de uma <textarea> como fiz na minha resposta :) Commented 21/04/2020 às 16:13
  • 1
    @RafaelTavares eu tou meio sem tempo agora, mas podemos testar outros containers dessa lista pra ver quais são resizable. De qq forma acho que essa solução do outro Rafael (autor da pergunta) vai ter problemas com o tamanho da linha quando acontecer do input ficar na margem. Talvez fosse melhor ele fazer o form separado, mais tradicional, e mostrar o texto montado logo abaixo, via JS... Mas aí eu já estou palpitando demais kkkk.
    – Largato
    Commented 21/04/2020 às 16:19
  • @RafaelTavares editei a resposta, troquei por SPAN, que faz parte da lista de elementos considerados phrasing-content, grato pela observação.
    – Largato
    Commented 21/04/2020 às 16:25
  • Fiquei surpreso em funcionar com <span> por causa do que tinha encontrado pesquisando e testando no <input>. Fui pesquisar mais e só fiquei mais confuso hahaha, mas aproveitei para atualizar minha resposta também. Tudo indica que é esperado não funcionar resize no <input>, mas funcionar na <textarea> é por causa de magia (ou convenção mesmo) Commented 21/04/2020 às 16:39
  • A ideia do container funcionou muito bem também. Depende um pouco mais de ajustes no meu código, uma vez que estou utilizando dentro e fora do summernote. @RafaelTavares acho que é válido pensar em magia =P
    – Rafael
    Commented 21/04/2020 às 17:34
3

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.

"Mas e se eu mudar para display: block e colocar overflow: visible?"

Deveria funcionar, mas o <input> é um replaced element (um elemento substituído é um elemento cuja representação está fora do escopo do CSS), então não é possível usar resize nele por conta dessas limitações.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

document.querySelector("#txtArea").addEventListener("keydown", e => {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
});
textarea {
  resize: horizontal;
  white-space: nowrap;
  overflow: hidden;
  min-width: 120px;

  /* Para alinhar com o texto */
  margin-bottom: -4px;
}
<p>Declaro para os devidos fins que eu <textarea id="txtArea" placeholder="Insira seu nome" rows="1"></textarea> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus nisi nibh, nec varius tortor blandit nec. Suspendisse scelerisque mauris et imperdiet placerat. Vivamus vel ex lorem. Morbi est orci, suscipit in consectetur in, egestas a risus.</p>

"Por que funciona na <textarea> então, se ela também é um elemento substituído?"

Bom, a documentação do MDN indica que na maioria dos navegadores as <textarea>'s são redimensionoáveis, então a minha especulação aqui é de que isso está mais para uma convenção do que especificação. Você pode ler as especificações da <textarea>, mas lá não há uma menção sequer ao resize.

4
  • Interessante que o textarea também se encontra na lista neh? Eu estou tentando utilizar o textarea, porém infelizmente ele não se alinha ao texto igual um input (Fica um pouco pra cima) talvez pela altura da caixa ou o padding. Talvez seja necessário ajustar via css pra parecer com um input imagino. Completei a pergunta com imagens pra ficar mais claro
    – Rafael
    Commented 21/04/2020 às 15:15
  • Bem notado que a <textarea> também é inline. Procurei até nas especificações mas não diz nada sobre ela poder ter o resize... O máximo que encontrei foi "In most browsers, <textarea>s are resizable", indicando que isso provavelmente é uma convenção. Commented 21/04/2020 às 15:41
  • E sobre o alinhamento, modifiquei a resposta e precisei usar margin-bottom negativa pra dar uma alinhada , mas sem a margin-bottom ela não ficava igual na sua imagem, você provavelmente tem outros estilos afetando ela ou a tag <p>. Commented 21/04/2020 às 15:42
  • Interessante essa convenção. Vou dar mais uma estudada pra entender o funcionamento do resize. De fato, eu tenho um line-height no meu código, acertei ele pra 0.4em abaixo do margin-bottom e ficou perfeito. Muito Obrigado xará.
    – Rafael
    Commented 21/04/2020 às 15:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .