auto-cambio de tamaño de cuadro de entrada de texto html

He creado una entrada (tipo de texto) en la casilla y lo hizo de cambio de tamaño automático, sencillamente. Sin embargo, hay un par de fallos que me parece que no puede solucionar:

  1. cuando empiezo a teclear el cuadro se encoge un poco
  2. cuando yo presione la tecla de retroceso (o las flechas direccionales), la caja se expande en primer lugar, y luego se encoge cuando yo siga escribiendo.

Aquí está mi código:

JS:

function Expander() {
    	
    this.start = function () {
    			
        $("#inputbox").keydown(function(e) {
               			
            this.style.width = 0;
            var newWidth = this.scrollWidth + 10;
    			
            if( this.scrollWidth >= this.clientWidth )
                newWidth += 10;
    				
            this.style.width = newWidth + 'px';
    			
        });
    		
    }
    	
}
    
    
$(function() {
   	window.app = new Expander();
   	window.app.start();
});

CSS:

input {
    	margin-left:3em;
    	min-width:100px;
    	max-width:600px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<meta charset="UTF-8">
<body>

    <div id="wrap">
    	<input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." width="100px"/>
    </div>
    <div id="counter"></div>
</body>

  • sólo una observación, hay que pensar al pegar texto o presionando una tecla y manteniéndola. Tal vez usted debe buscar en el plugin en esta respuesta: stackoverflow.com/questions/931207/… en su lugar.
  • gracias, yo no estaba terminado con mi código, sólo se preguntó por qué había problemas. nunca voy a aprender el idioma, si me acabo de tomar el código de los demás 🙂
  • usted no necesita tomar sólo el código, se puede analizar lo que su código es haciendo así que usted puede escribir su propio plugin, yo lo encuentro muy útil cuando el aprendizaje.
  • Respecto a tu primera pregunta, creo que se reduce debido a que el ancho predeterminado de la entrada es 117px (al menos en chrome). Si establece el ancho en el CSS para que sea el mismo como min-width debe estar bien.
  • Respecto a su segunda pregunta, el uso de la «oninput de» evento » en lugar de «onkeydown».
InformationsquelleAutor rockerist | 2013-10-17

3 Kommentare

  1. 3

    Que usted puede probar esto.

    Ponemos el contenido en un oculto span & a continuación, ajuste la anchura de acuerdo a span scrollWidth.

    JS:

    function Expander() {
    
        this.start = function () {
    
            $('#inputbox').on('keydown',function(e) {
    
                $("#hidden_span").html("");
                $("#hidden_span").append("<p>"+$(this).val()+"</p>");
    
                var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;
    
                if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                    $(this).css("width",hidden_span_scroll_width);
                }
    
            });
    
        }
    
    }
    
    
    $(function() {
        window.app = new Expander();
        window.app.start();
    });

    CSS:

    input {
        margin-left:3em;
        min-width:100px;
        max-width:600px;
    }
    
    #hidden_span{
        position:absolute;
        top:0px;
        left:0px;
        visibility:hidden;
        width:10px;
        white-space:nowrap;
        overflow:hidden;
    }

    HTML:

    <head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    </head>
    
    <body>
    <div id="wrap">
        <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." />
    </div>
    <div id="counter"></div>
    <span id="hidden_span"></span>
    </body>

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <title>Test page</title>
    </head>
    
    <body>
    <style>
    input {
        margin-left:3em;
        min-width:100px;
        max-width:600px;
    }
            #hidden_span{
                position:absolute;
                top:0px;
                left:0px;
                visibility:hidden;
                width:10px;
                white-space:nowrap;
                overflow:hidden;
    
            }
    </style>
    <script>
    
    function Expander() {
    
        this.start = function () {
    
            $('#inputbox').on('keydown',function(e) {
    
    
                $("#hidden_span").html("");
                $("#hidden_span").append("<p>"+$(this).val()+"</p>");
    
    
                var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;
    
         if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                    $(this).css("width",hidden_span_scroll_width);
                         }
    
    
            });
    
        }
    
    }
    
    
    $(function() {
        window.app = new Expander();
        window.app.start();
    });
    
    </script>
    <div id="wrap">
        <input type="text" id="inputbox" name="input" placeholder="yes" />
    </div>
    <div id="counter"></div>
    <span id="hidden_span"></span>
    </body>
    </html>
    • gracias, esto soluciona mis problemas, pero no cambiar el tamaño de vuelta en eliminar y retroceso. eso es más fácil de solucionar, aunque.
    • he editado mi anterior código & ahora se debe trabajar con borrar también. Aquí está la demo jsfiddle.net/vdv9q
  2. 0

    Al principio puede utilizar métodos jQuery para evitar crossbrowser problema. Y scrollWidth devuelve la anchura en píxeles del contenido de un elemento o de la anchura del elemento en sí, lo que sea mayor. Para ampliar newWidth sólo cuando el contenido de anchura fuertemente mayor que la anchura del elemento.

    $("#inputbox").keydown(function(e) {
    
      var a = $(this).width(), newWidth;
    
    
      if(this.scrollWidth - a > 0){
        newWidth = a + 10;
      }else if(e.keyCode==8){
        newWidth = a - 10;
      }
      $(this).css("width", newWidth);
    
    });

    Si usted no quiere hacer la entrada más pequeña cuando se pulsa la tecla de retroceso – eliminar el contrario, si la parte de código.

    • ok, esto funciona igual de bien, aunque yo no lo quiero para codificar las llaves en él, ya que este código no funciona si me presione supr. yo quería que el cuadro para cambiar el tamaño basado únicamente en su contenido.
  3. -1
    <input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>

    Quitar el width="100px", como este:

    <input type="text" id="inputbox" name="input" placeholder="yes"/>

    Y no va a cambiar el tamaño más cuando comiencen a escribir.

    Vivir ejemplo:

    http://jsfiddle.net/2EMfd/

    Sin embargo, el exanding función no funciona en mi navegador?

    *Editar, hizo una simple función de despliegue en el inputbox es esto lo que usted tratando de donde? http://jsfiddle.net/2EMfd/1/

    • gracias, pero no. el segundo enlace cambia de tamaño en cada tecla de prensa, incluso en cmd y flechas direccionales. necesito que se expanda como el contenido en su interior cerca de llegar a la anchura de la caja de entrada.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea