web-dev-qa-db-fra.com

Créer un type d’entrée = "bouton" avec deux lignes de texte pour la nouvelle version de chrome

Je vais accepter une réponse de "pas possible" si quelqu'un peut expliquer pourquoi. Cependant, je ne vais pas excepter une réponse à l'aide d'un <button> car ce n'est pas ce que cette question demande.

J'essaie de créer un bouton de saisie avec deux lignes de mots, mais les nouvelles versions de chrome ne me laissent pas tomber, voici ce que j'ai essayé

Séparateurs de retour de chariot

    <input type="button" value="Line One&#13;&#10;Line Two"/>

    <input type="button" value="Line One\r\nLine Two">

Je sais que vous pouvez utiliser white-space: normal; mais cela ne vous laissera pas <br> où vous le souhaitez.

input[type="submit"] {
    white-space: normal;
}

Est-il possible d'ajouter la nouvelle ligne dans le bouton où je choisis?

c'est à dire.

première ligne

ligne deux

htmlcsshtml5css3
22
Adam Buchanan Smith

Bien que je ne puisse pas prouver que c'est impossible, ce n'est pas une bonne idée d'essayer de faire en sorte que le bouton input prenne plusieurs lignes. Tout d’abord, la spécification HTML5 ne dit ceci que sur l’attribut value:

Si l'élément a un attribut value, le libellé du bouton doit être la valeur de cet attribut

Notez que "l'étiquette du bouton" n'est définie nulle part dans la spécification. Cela signifie que c'est aux éditeurs de navigateurs de choisir comment interpréter cela. Cela signifie également qu'ils peuvent modifier leur interprétation à leur guise.

Vous venez d'assister à la décision de l'équipe Google Chrome d'effectuer un tel changement. Cela pourrait se reproduire, peut-être dans un autre navigateur. Ainsi, toute solution que vous trouverez maintenant ne sera pas permanente et sujette aux caprices des vendeurs de navigateurs.

C'est pourquoi je recommande fortement d'utiliser l'élément <button>. Parce que les spécifications vous garantissent de pouvoir formater le HTML, comme des sauts de ligne.

20
rvighne

@aardrian a indiqué la bonne direction, vous devez également définir -webkit-appearance en tant que none pour supprimer le style spécifique de l'entrée.

CSS

input {
  white-space: normal;
  width: 50px;
  -webkit-appearance: none;

  background: #ddd;
  border: none;
}

HTML

<input type="submit" value="Text1 Text2 Text3 Text4" />

 enter image description here

Vous pouvez modifier la largeur pour autoriser plus de mots dans chaque ligne.

Codepen: http://codepen.io/anon/pen/xOExpX

Il semble qu'il n'y ait aucun moyen d'ajouter du HTML dans la valeur, la valeur valeur est toujours vérifiée:

L'attribut content value donne la valeur par défaut de l'entrée élément. Lorsque l'attribut de contenu de valeur est ajouté, défini ou supprimé, si l'indicateur de valeur de contrôle du contrôle est false, l'agent d'utilisateur doit définir la valeur de l'élément à la valeur de l'attribut content value, s'il en existe un ou la chaîne vide dans le cas contraire, puis exécutez le fichier algorithme d'assainissement de la valeur actuelle, s'il en existe un.

Info: https://www.w3.org/TR/html5/forms.html#attr-input-value

8
stig-js

Pirater:

input[type="submit"] {
    white-space: normal;
    width: 7em;
}

La largeur doit correspondre au mot le plus long. Cela ne permet pas les sauts de ligne arbitraires.

Meilleure solution: utilisez <button>.

3
aardrian

Utilisez <button type=submit> à la place.

<button type=submit>First line<br>Second line</button>

3
c-smile

Cela pourrait-il être utile? Pas exactement ce que vous avez demandé, je sais ...

(remarquez aussi la différence de police depuis que j'ai eu quelques votes positifs, je me suis occupé du problème des polices de caractères)

input{
  font-family:inherit;
  font-size:inherit;
}
#line1{
  padding-bottom: 25px; 
  padding-left:5px;
  text-align:left;
  width:75px;/*Depends on the second line lengh*/
}
#line2{ 
  margin-top: -23px; 
  padding-left:7px;  
}
<input type="button" value="Line One" id="line1"/>
<div id="line2">Line Two</div>

2
Theodore K.

À ma connaissance, il n’est pas possible de réaliser ce que vous souhaitez avec votre contribution. L'attribut "valeur" traitera tout ce qui se trouve à l'intérieur comme une chaîne à imprimer à l'écran. Ainsi, toutes les balises <br /> seront simplement traitées en tant que texte et ne seront pas rendues en HTML. Il n'accepte aucun caractère d'échappement.

Votre meilleure option est d'utiliser le bouton comme le suggère c-smile ou vous pouvez créer un div, le styler à votre guise et ajouter un javascript au clic qui entraînera l'envoi d'un formulaire.

Alternativement, si vous croyez fermement que vous devez utiliser des entrées, vous pouvez utiliser un peu de javascript (ceci est uniquement si vous ne savez pas quels mots sont la largeur inconnue).

Pour mémoire, je conseille vivement d’utiliser un bouton, voici comment procéder:

https://jsfiddle.net/bdLanac5/1/

 var inputValue = $("#myInput").val();
    var inputValues = inputValue.split(" ");
    var longestValue = inputValues.reduce(function (a, b) { return a.length > b.length ? a : b; });
    
    $("#myInput").val(longestValue);
    var length = $("#myInput").outerWidth();
    $("#myInput").css("width", length);
    $("#myInput").val(inputValue);
    input{
      white-space: normal;
    }
<input id="myInput" type="submit" value="This is a test"/>

Si vous connaissez la largeur, supprimez le javascript et ajoutez width à css à votre élément input.

2
Bojan

Un peu un bidouillage, mais vous pouvez utiliser des espaces réguliers où vous voulez que la ligne se casse, et nbsp où vous ne le faites pas - assurez-vous simplement que la largeur est définie pour la loger correctement. 

jsfiddle

    input{
     white-space: normal;
     width: 110px;
    }
<input type="button" value="Text1&#160;Text2&#160;Text3 Text4" />

1
asimovwasright
<input id="myInput" type="submit" value="Line OneLine Two"/>

input{
  white-space: normal;
  Word-break: break-all;
}

#myInput{
  width:73px;
}

Vous pouvez donner votre propre largeur au bouton.

0
Tuks