web-dev-qa-db-fra.com

Ajuster dynamiquement la largeur de saisie du texte HTML au contenu

Je ne trouve pas de réponse claire à ce sujet et je m'excuse s'il en manque une.

Je veux que mes largeurs de saisie de texte s'adaptent automatiquement à la taille du contenu qu'elles contiennent. D'abord avec un texte d'espace réservé que le texte réel saisi par quelqu'un.

J'ai créé le ci-dessous à titre d'exemple. Actuellement, les blocs sont beaucoup plus volumineux que mon texte fictif, générant une grande quantité d'espace blanc. C'est évidemment la même chose quand je tape quelque chose. 

J'ai essayé la largeur automatique, certains jQuery et la ficelle et le bubble-gum trouvés sur Internet. Mais rien n'a encore fonctionné. Des pensées? Merci!

HTML:

<span><p>Hello, my name is </p></span>

<span><input type="text" id="input" class="form" placeholder="name"></span>

<span><p>. I am </p></span>

<span><input type="text" id="input" class="form" placeholder="age"></span>

    <span><p> years old.</p></span>

CSS:

.form {
    border: 0;
    text-align: center;
    outline: none;
}

span {
    display: inline-block;
}

p {
    font-family: arial;
}

Fiddle

javascriptjqueryhtmlformsinput
10
ObbyOss

Une façon possible:

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color:gray;
}
/* found this online --- it prevents the user from being able to make a (visible) newline */
[contenteditable=true] br{
  display:none;
}
<p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p>

Source pour CSS: http://codepen.io/flesler/pen/AEIFc .

Vous devrez faire quelques astuces pour choisir les valeurs si vous avez besoin des valeurs d'un formulaire.

9
sudo rm -rf slash

Kevin F a raison, il n’ya pas de moyen autochtone de le faire.

Voici une façon de le faire si vous voulez vraiment que cela se produise.

Dans le code, il y a une étendue invisible où le texte est placé. Puis on récupère la largeur de la travée.

https://jsfiddle.net/r02ma1n0/1/

var testdiv = $("#testdiv");
$("input").keydown( function(){
    var ME = $(this);
    //Manual Way
    //var px = 6.5;
    //var txtlength = ME.val().length;
    //$(this).css({width: txtlength * px });

   testdiv.html( ME.val() + "--");
   var txtlength = testdiv.width();
   ME.css({width: txtlength  }); 
});
1
user4115765

Essayez avec l'attribut 'size'. Cela fonctionnera même lorsque vous effacerez le texte . Vous avez besoin de jQuery

<div>
    <input id="txt" type="text" style="max-width: 100%;" placeholder="name">
</div>
<script>
    $(document).ready(function() {
        var placeholderLen = $('#txt').attr('placeholder').length;
        // keep some default lenght
        placeholderLen = Math.max(5, placeholderLen);
        $('#txt').attr('size', placeholderLen);

        $('#txt').keydown(function() {
            var size = $(this).val().length;
            $(this).attr('size', Math.max(placeholderLen, size));
        });
    });
</script>
0
pradeep