Jump to content

Recommended Posts

Olá pessoal. Direito ao ponto. Como fazer o o input se comportar da mesma forma que a div. Note que a largura da div, aumenta ao passo que adicionamos conteúdo. Quero que o input se comporte da mesma forma ou seja aumente a largura ao passo que adicionamos conteúdo no atributo value="" 

<input type="text" style="border:1px solid #000;" value=""><br><br>

<div style="border:1px solid #000; display:inline;">aprendiz aprendiz aprendiz</div>

 

 

Share this post


Link to post
Share on other sites

1 - Uma ideia mas nessa ideia, deve se levar em conta a fonte para o input e elemento auxiliar

 

// Usando apenas Javascript

var inputRef = document.getElementById("input");

inputRef.addEventListener("keyup", function(event) {
  const inputBaseSize = event.target.offsetWidth;
  const handlerSizeText = document.getElementById("handlerSizeText");
  const minimalSize = inputRef.getAttribute("minimal-size");
  
  handlerSizeText.innerText = inputRef.value;
  
  console.log("result:", handlerSizeText.offsetWidth, minimalSize)
  
  if(inputBaseSize < handlerSizeText.offsetWidth) {
    inputRef.style.width = handlerSizeText.offsetWidth + "px";
  }
  
  if(inputBaseSize >= handlerSizeText.offsetWidth ) {
    inputRef.style.width = handlerSizeText.offsetWidth + "px";
    
    if(handlerSizeText.offsetWidth < minimalSize) {
      inputRef.style.width = minimalSize + "px";
    }
  }
   
});

Jsbin: https://jsbin.com/logituhefa/edit?html,css,js,output

 

2 - Essa ideia é uma mescla com classes mas ainda não estão bem encapsuladas

 

var inputRef = document.getElementById("input");

inputRef.addEventListener("keyup", function(event) {
  const inputBaseSize = event.target.offsetWidth;
  const auxiliarSizeText = document.getElementById("auxiliarSizeText");
  
  const input = new Input(inputRef);
  const auxElement = new AuxiliarSizeText(auxiliarSizeText);
  
  const dinamicInputSize = new DinamicInputSize(input, auxElement);
  dinamicInputSize.handlerInputWithCurrentValue(inputBaseSize);
});


class DinamicInputSize {
  
  constructor(inputReference, auxiliarElement){
    this.inputReference = inputReference;
    this.auxiliarElement = auxiliarElement;
    
    this.auxiliarElement.setValue(this.inputReference.getValue());
  }
  
  handlerInputWithCurrentValue(currentValue) {
    if(currentValue < this.auxiliarElement.getWidth()) {
      this.inputReference.setWidth(this.auxiliarElement.getWidthInPixelFormat());
    }
  
    if(currentValue >= this.auxiliarElement.getWidth()) {
      this.inputReference.setWidth(this.auxiliarElement.getWidthInPixelFormat());
    
      if(this.auxiliarElement.getWidth() < this.inputReference.getMinimalSize()) {
        this.inputReference.setWidth(this.inputReference.getMinimalSizeInPixelFormat());
      }
    }
  }
}

class AuxiliarSizeText {
  constructor(auxElementReference) {
    this.auxElementReference = auxElementReference;
  }
  
  setValue(value) {
    this.auxElementReference.innerText = value;
  }
  
  getWidth() {
    return this.auxElementReference.offsetWidth;
  }
  
  getWidthInPixelFormat() {
    return this.auxElementReference.offsetWidth + "px";
  }
}

class Input {
  constructor(inputReference) {
    this.inputReference = inputReference;
  }
  
  getValue() {
    return this.inputReference.value;
  }
  
  getWidth() {
    return this.inputReference.style.width;
  }
  
  setWidth(width) {
    this.inputReference.style.width = width;
  }
  
  getMinimalSize() {
    return this.inputReference.getAttribute("minimal-size");
  }
  
  getMinimalSizeInPixelFormat() {
    return this.inputReference.getAttribute("minimal-size") + "px";
  }
}

Jsbin: https://jsbin.com/gejiyenogo/edit?html,js,output

 

3- Outra ideia use contenteditable property

jsBin: https://jsbin.com/lazotoxife/edit?html,css,output

 

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 Biel.
      Olá pessoal. Direto ao ponto. Abaixo temos pagina pesquisar e exibir. Ao pressionar ok a url retorna o parâmetro  exibir.php?parametroA=123 .  Ao pressionar ok, como fazer para retornar três parâmetro na url assim ->  exibir.php?parametroA=123&parametroB=5&parametroC=7  obrigado !
       
      esta á a pagina pesquisar.php <form action="exibir.php" method="get" name="form1" id="form1" > <input type="text" name="parametroA" value="123"> <button type="submit" value="ok"> </form> esta á a pagina exibir.php  
    • By Biel.
      Olá pessoal. Direto ao ponto. Estou tentando enviar os dados sem refresh na página.  Obrigado!
       
      pagina1.php <?php @$nome = $_POST['nome']; print $nome.'<br><br><br>'; ?> <script> function enviarSemRefrash() { } </script> <form id="formulario" action="" method="post"> Nome: <br /> <input name="nome" type="text" id="nome" size="35" /> <br /><br /> <input type="submit" name="acao" onClick="enviarSemRefrash()" value="Enviar" /> </form>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Ex1 retorna normalmente os elementos do array. Como fazer o EX2 também retornar os elementos do array. Obrigado!
       
      Ex1 <?php $dados = array('teste1', 'teste2', 'teste3', 'teste4'); for($a=0; $a<count($dados); $a++){ print $dados[$a].'<br>'; } ?> Ex2 <?php $dados = array(`teste1`, `teste2`, `teste3`, `teste4`); for($a=0; $a<count($dados); $a++){ print $dados[$a]; } ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto. EX1 imprime dados repetidos. EX2 não imprime dados repetidos. Que função uso no  EX1 para imprimir somente dados não repetidos? Obrigado !
       
      EX1
      <?php $a=1; $b=2; $c=1; $d=4; $e=5; $imprime=$a.'<br>'.$b.'<br>'.$c.'<br>'.$d.'<br>'.$e; print $imprime; ?> EX2
      <?php $a=1; $b=2; $c=3; $d=4; $e=5; $imprime=$a.'<br>'.$b.'<br>'.$c.'<br>'.$d.'<br>'.$e; print $imprime; ?>  
    • By Biel.
      Olá pessoal. direto ao ponto. Suponha que o código abaixo é um site.
      a navegação interna entre os links funciona normalmente sem refresh na pagina, mas na ul não passa o link que foi pressionado. Como fazer passar na url o link que foi pressionado ?
       
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$("#tete").click(function( e ){ $("#menu a").click(function( e ){ e.preventDefault(); var href = $( this ).attr('href'); $("#content").load( href +" #content"); }); }); </script> ...
      index.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina index</h1> </div> <hr> fotos.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina fotos</h1> </div> <hr> contato.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina contato</h1> </div> <hr>  
×

Important Information

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