HTML & lt; entrée & gt; attribut de taille ne fonctionne pas?

Police À Chasse Fixe

Les meilleurs résultats que j'ai vu est venu grâce à l'utilisation d'une police à espacement fixe:

<input type="text" size="4" style="font-family:monospace" />

En ligne Exemple: http://jsbin.com/epagi/edit Rendu parfaitement dans Firefox, Chrome, Safari et IE.

Si vous utilisez une largeur variable de police, vous devez utiliser un script pour obtenir une meilleure estimation de ce qui l'attend largeur, mais comme vous l'avez dit, ce n'est pas très élégant.

Largeur Variable De Police

J'ai essayé de travailler jusqu'à une raisonnable-la solution la plus simple pour largeur variable de polices, mais en fin de compte, vous aurez besoin de voir si cela correspond à votre projet ou pas.

Fondamentalement, ce que j'ai fait était de définir la text-transform de certaines entrées de uppercase pour obtenir une semi-constant pour la largeur de quelque chose sera lorsque rempli avec du texte. J'ai ensuite appliqué un nom de classe qui ont indiqué que le champ doit être auto-de taille moyenne, et combien de caractères nous nous attendons à: sizeMe-4. À l'aide de jQuery, j'ai collecté toutes ces contributions, et de diviser cette classname pour obtenir le nombre de caractères attendus.

J'ai étendu l'objet de Chaîne d'inclure une méthode de répétition qui me permet de créer facilement une chaîne de la taille attendue, et l'ajouter à un groupe ad-hoc de la durée de l'élément pour obtenir la largeur. Cette largeur a ensuite été appliquée rétroactivement à la première entrée de l'élément. La durée est ensuite défaussée.

Démo En Ligne: http://jsbin.com/epagi/2/edit

Pour des raisons de commodité, voici le code:

<input type="text" name="pin" maxlength="4" class="sizeMe-4" 
       style="text-transform:uppercase" />

--

String.prototype.repeat = function(num) {
    return new Array( num + 1 ).join( this );
}

$(function(){
  $(":input[class^='sizeMe']").each(function(){
    var size = Number($(this).attr("class").split("-").pop());
    var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
    $(this).width( $(newW).width() );
    $(newW).remove();
  });
});​