Wie kann ich Platzhaltertext so verkleinern, dass er in das Texteingabeelement passt und seinen gesamten Wert anzeigt?

Question

Ich habe folgende HTML:

<form> 
    <table border="1"> 
     <tr> 
      <td>Traveler's name:</td> 
      <td> 
       <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/> 
      </td> 
     </tr> 
     <tr> 
      <td>Traveler's E-mail:</td> 
      <td> 
       <input type="email" id="traveleremail"/> 
      </td> 
     </tr> 
    </table> 
</form> 

I der Platzhalter val wollen jederzeit vollständig sichtbar sein, aber es ist nicht:

habe ich versucht, diese CSS hinzufügen:

input[placeholder] { 
    font-size: 0.6em; 
} 

... aber, während dies die Größe der Schriftart bewundernswert reduziert, wird der Text abgeschnitten:

Ich habe versucht, auf die CSS Hinzufügen wie so:

input[placeholder] { 
    font-size: 0.6em; 
    width: 500; 
} 

... aber es hat nichts zu erweitern/verbreitern Textbereich des Platzhalter im Eingabetext (der Eingabetext ist breit genug, um den reduzierten Text zu halten, aber er ist immer noch in einem zu kleinen Bereich in sich zusammengebrochen).

Wie kann dies erreicht werden?

Answer 1

Ursprüngliche Antwort - Juli 2015

Was ist mit so etwas zu tun? Ich habe jQuery verwendet, um es zu demonstrieren. Wenn Sie möchten, dass es hinsichtlich der Breite des Textes "genauer" ist, können Sie einen Weg finden, die Breite des Textes zu erhalten und dann die Breite in jquery's CSS auf den Wert der Funktion einzustellen, die die Breite des Textes erhält (In diesem Fall müssen Sie wahrscheinlich ein Element erstellen, sein HTML auf den Inhalt des Platzhalters setzen, die Breite des Textes ermitteln und dann das Element löschen. In jedem Fall ist der Code unten, was ich tun würde, um zu erreichen, was Sie fragen.

Ich entschied mich für setInterval, da Änderungen an Eingabefeldern nicht schwarz und weiß sind. each durchläuft die Eingabeelemente. Der Code prüft dann, ob die Eingabe leer ist. Wenn ja, wird die Schriftgröße herunterskaliert (auf 10px, wie ich sie fest codierte), ansonsten wird sie auf den Standardwert gesetzt (angenommen, Sie wollen 14px, 14px).

setInterval(function() { 
 
    $('input').each(function(){ 
 
     if($(this).val() === ''){ 
 
      $(this).css({ 
 
       "width":$(this).width()+"px", 
 
       "height":$(this).height()+"px" 
 
      }); 
 
      if(parseFloat($(this).css('font-size'))<=14){ 
 
       $(this).animate({ 
 
        "font-size":10+"px" 
 
       }); 
 
      } 
 
     } 
 
     else { 
 
      $(this).finish().clearQueue().css({ 
 
       "font-size":14+"px" 
 
      }); 
 
     } 
 
    }); 
 
}, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <table border="1"> 
 
     <tr> 
 
      <td>Traveler's name:</td> 
 
      <td> 
 
       <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Traveler's E-mail:</td> 
 
      <td> 
 
       <input type="email" id="traveleremail"/> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form>

Wenn Sie möchten, können Sie das Intervall für die setInterval Funktion senken oder erhöhen, damit es schneller oder langsamer ausführen (beachten Sie die Leistung und unterschiedlichen Rechengeschwindigkeiten)

---

---

EDIT - Mai 2017

Als ich diese Frage mehr als tausend Mal gesehen habe, fühlte ich, dass ich meine Antwort aktualisieren sollte, um ein wenig nützlicher zu sein und weniger auf manuelle Eingaben angewiesen zu sein.

Der Code funktioniert unten wie folgt:

• Ihre CSS-Style erstellen sowohl für die Eingabefelder und ihre zugehörigen Klone (diese Logik auf Ihre Bedürfnisse angepasst werden können, aber der Einfachheit halber habe ich alles gegeben, Eingabeelement Klont die gleiche Klasse)
• Schleifen über all input Elemente und erzeugen ein Klon
• die Breite des Klons Ruft und vergleicht seine Breite das Breite des Eingangselementes, während die font-size bei jeder Iteration durch die step
Reduzierung
• Sobald die Breite des Klons kleiner oder gleich der Breite des Eingabeelements ist, löschen wir das Klonelement und setzen die Eingabe font-size.
• Nach Benutzereingabe innerhalb des input Element, rückgängig machen wir unsere Änderungen an font-size

Hinweis: Wenn "Verhängnis" unsere Änderungen an dem Eingangselement, wir sind in der Tat das Entfernen der inlineEigenschaft und Wert. Alle Stile für diese Elemente sollten in CSS ausgeführt werden (oder Sie müssen versuchen, einen Weg zu finden, z. B. ein verstecktes Element mit ID zu erstellen, darauf zuzugreifen, den Stil zu ziehen und ihn wieder auf das Eingabeelement anzuwenden).

Beim Testen des unten stehenden Codes fand ich persönlich heraus, dass ein Schritt von 0.1 ausreichend war und dass ein kleinerer Wert (von beispielsweise 0,01) die Leistung beeinträchtigte. Sie können jedoch mit diesem Wert spielen, wie Sie möchten.

// Step is used to reduce font-size by value X 
 
var step = 0.1; 
 

 
setInterval(function() { 
 
    // Loop over input elements 
 
    $('input').each(function() { 
 
    // Only change font-size if input value is empty (font-size should only affect placeholder) 
 
    if ($(this).val() === '') { 
 
     // Create clone 
 
     $clone = $('<span></span>') 
 
     .appendTo('body') 
 
     .addClass('inputClone') 
 
     .text($(this).attr('placeholder')); 
 
     // Adjust font-size of clone 
 
     var fontSize = $(this).css('font-size'); 
 
     do { 
 
     fontSize = parseFloat($clone.css('font-size')) - step; 
 
     $clone.css({ 
 
      'font-size': fontSize 
 
     }); 
 
     } while ($clone.width() > $(this).width()); 
 
     // Maintain input field size 
 
     $(this).css({ 
 
     "width": $(this).width() + "px", 
 
     "height": $(this).height() + "px" 
 
     }); 
 
     // Change input font-size 
 
     $(this).animate({ 
 
     'font-size': fontSize 
 
     }); 
 
     // Delete clone 
 
     $clone.remove(); 
 
    } else { 
 
     // Default input field back to normal 
 
     $(this) 
 
     .finish() 
 
     .clearQueue() 
 
     .attr('style', function(i, style) { 
 
      // Remove inline style for font-size 
 
      return style.replace(/font-size[^;]+;?/g, ''); 
 
     }); 
 
    } 
 
    }); 
 
}, 100);

input, 
 
.inputClone { 
 
    font-family: "Arial", Helvetica, sans-serif; 
 
    font-size: 14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>Traveler's name:</td> 
 
     <td> 
 
     <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Traveler's E-mail:</td> 
 
     <td> 
 
     <input type="email" id="traveleremail" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>