auto-redimensionnement de la zone de saisie de texte html

J'ai créé une entrée (type de texte) et fait de l'auto-redimensionner tout simplement. Cependant, il ya quelques problèmes que je n'arrive pas à résoudre:

lorsque je commence à taper la boîte réduit un tout petit peu
lorsque j'appuie sur la touche retour arrière (ou flèches directionnelles), la zone s'étend d'abord, puis se rétrécit quand je continuer à taper.

Voici mon code:

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>

juste une observation, pensez lorsque vous collez du texte ou en appuyant sur une touche vers le bas et de la tenir. Peut-être que vous devriez regarder le plugin sur cette réponse: stackoverflow.com/questions/931207/... à la place.
merci, je n'ai pas fini avec mon code, il suffit de se demander pourquoi il a eu des problèmes. je ne vais jamais apprendre la langue si je viens de prendre le code des autres 🙂
vous n'avez pas besoin de prendre juste le code, vous pouvez analyser ce que leur code est fait de sorte que vous pouvez écrire votre propre plugin, je trouve cela très utile lors de l'apprentissage.
Concernant votre première question, je pense qu'il se rétrécit en raison de la largeur par défaut de l'entrée est 117px (au moins dans chrome). Si vous définissez la largeur de la CSS à être le même que le min-width elle doit être fine.
Concernant votre deuxième question, utiliser le "oninput de l'événement" au lieu de "onkeydown".

InformationsquelleAutor rockerist | 2013-10-17

Vous pouvez essayer cette.

Nous mettre le contenu caché dans un span & puis ajuster la largeur selon 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>

merci, cela résout mes problèmes, mais il n'est pas redimensionnée retour sur delete et backspace. c'est plus facile de corriger si.
j'ai édité mon code ci-dessus & maintenant, il doit travailler avec les supprimer aussi. Voici la démo jsfiddle.net/vdv9q

InformationsquelleAutor Peeyush

0

Au premier abord, vous pouvez utiliser les méthodes jQuery pour éviter crossbrowser problème. Et scrollWidth renvoie la largeur en pixels du contenu d'un élément ou de la largeur de l'élément lui-même, selon le plus élevé. Donc agrandir newWidth uniquement lorsque le contenu de la largeur fortement plus grand que la largeur de l'élément.
```
$("#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 vous ne voulez pas faire l'entrée de plus petites lorsqu'il est pressé arrière - supprimer le reste, si la partie de code.
- ok, cela fonctionne bien mais je ne veux pas coder en dur les touches parce que ce code ne fonctionne pas si j'appuyez sur la touche suppr. je voulais la case redimensionner uniquement en fonction de son contenu.
InformationsquelleAutor wmbtrmb
-1
```
<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>
```
Supprimer la width="100px", comme ceci:
```
<input type="text" id="inputbox" name="input" placeholder="yes"/>
```
Et il n'est pas redimensionné plus bas lorsque vous commencez à taper.

Live exemple:

http://jsfiddle.net/2EMfd/

Cependant, le exanding fonction ne semble pas fonctionner dans mon navigateur?

*Édition, n'a qu'une simple fonction de développement sur le inputbox est-ce que vous avez tenté? http://jsfiddle.net/2EMfd/1/
- merci, mais non. le second lien redimensionne sur toutes les clés de la presse, même sur cmd et des flèches directionnelles. j'en ai besoin pour développer le contenu à l'intérieur atteindre près de la largeur de la zone de saisie.
InformationsquelleAutor Joran Den Houting

Vous devez vous connecter pour publier un commentaire.