web-dev-qa-db-de.com

Passen Sie die HTML-Texteingabebreite dynamisch an den Inhalt an

Ich kann keine klare Antwort darauf finden und entschuldige mich, wenn ich eine vermisst habe.

Ich möchte, dass sich meine Texteingabebreiten automatisch an die Größe des Inhalts anpassen. Zuerst mit Platzhaltertext als mit dem tatsächlichen Text, den jemand eingibt.

Ich habe das unten als Beispiel erstellt. Derzeit sind die Felder weitaus größer als mein Platzhaltertext, wodurch viel Leerraum entsteht, und es ist offensichtlich dasselbe, wenn ich etwas eingebe. 

Ich habe width auto, etwas jQuery und Schnur und Kaugummi aus dem Internet ausprobiert. Es hat aber noch nichts geklappt. Irgendwelche Gedanken? Vielen Dank!

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

10
ObbyOss

Verwenden Sie onkeypress even

siehe folgendes Beispiel: http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

Und für Platzhalter beim Laden verwenden Sie jquery und wenden Sie die Platzhaltergröße in zur Eingabe an

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

Auch wenn Sie id anstelle von input verwenden können, ist dies nur ein Beispiel, sodass ich $ (input)

Und in CSS bieten min-width

.form {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;
}

[~ # ~] edit [~ # ~] :


Wenn Sie den gesamten Text aus dem Eingabefeld entfernen, wird der Platzhalterwert mit focusout übernommen.

Beispiel : http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function(){

    if(this.value.length>0){
        this.style.width = ((this.value.length + 1) * 8) + 'px';
    }else{
      this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
    }

});
7
Keval Bhatt

Ein möglicher Weg:

[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>

Quelle für CSS: http://codepen.io/flesler/pen/AEIFc .

Sie müssen einige Tricks ausführen, um die Werte abzurufen, wenn Sie die Werte für ein Formular benötigen.

9

Kevin F hat recht, es gibt keinen einheimischen Weg, dies zu tun.

Hier ist eine Möglichkeit, dies zu tun, wenn Sie es wirklich wollen.

Im Code gibt es eine unsichtbare Spanne, in der der Text platziert wird. Dann rufen wir die Breite der Spanne ab.

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

Versuchen Sie es mit dem Attribut 'size'. Dies funktioniert auch dann, wenn Sie den Text löschen

<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