Wie ändere ich die Größe eines Eingabefeldes in CSS, um bereits darin enthaltenen Text

Question

Ich verwende PHP-Code, um eine Datenbank anzuzeigen und in der Lage, die Eingabe von dem, was angezeigt wird, zu bearbeiten, wie kann ich es so zur Eingabe machen Box ändert sich zu der Größe des Textes, der darin sein würde. das ist mein PHP-Code.

<table> 
<tr> 
    <th>Title</th> 
    <th>Description</th> 
    <th>Venue</th> 
    <th>Category </th> 
    <th>Start Date</th> 
    <th>End Date</th> 
    <th>Price(£)</th> 
</tr> 
<?php 
while($row = mysqli_fetch_array($records)) 
{ 
    echo "<tr><form action=editClick.php method=post>"; 
    echo "<td><input type=text name=title value='".$row['eventTitle'],"'></td>"; 
    echo "<td><input type=text name=desc value='".$row['eventDescription'],"'></td>"; 
    echo "<td><input type=text name=venue value='".$row['venueID'],"'></td>"; 
    echo "<td><input type=text name=cat value='".$row['catID'],"'></td>"; 
    echo "<td><input type=text name=start value='".$row['eventStartDate'],"'></td>"; 
    echo "<td><input type=text name=end Date value='".$row['eventEndDate'],"'></td>"; 
    echo "<td><input type=text name=price value ='".$row['eventPrice'],"'></td>"; 
    echo "<input type=hidden name=id value='".$row['eventID']."'>"; 

    echo "<td><input type=submit value=Edit></td>"; 
    echo "</form></tr>"; 
} 

?> 

Answer 1

, was Sie erreichen wollen, ist kein gutes Design. Stellen Sie sich vor, wenn der Wert innerhalb des Eingabe-Textfelds ein einzelner Buchstabe wie '1' oder 'a' ist, dann ist es nicht konsistent mit dem Design, besonders wenn es in einer Tabelle ist, aber wenn Sie es wirklich erzwingen möchten, können Sie jquery verwenden dies wie:

function resizeInput() { 
    $(this).attr('size', $(this).val().length); 
} 

$('input[type="text"]') 
    // event handler 
    .keyup(resizeInput) 
    // resize on page load 
    .each(resizeInput); 

http://jsfiddle.net/nrabinowitz/NvynC/