webentwicklung-frage-antwort-db.com.de

Erstellen Sie die Eingabe type = "button" mit zwei Textzeilen für die neuere Version von Chrome

Ich werde eine Antwort von "nicht möglich" akzeptieren, wenn jemand erklären kann, warum. Ich werde jedoch keine Antwort mit einem <button> geben, da dies nicht die Frage ist, die diese Frage stellt.

Ich versuche einen Eingabeknopf mit zwei Zeilen zu machen, aber die neueren Versionen von Chrome lassen mich nicht zu, hier habe ich versucht:

Wagenrücklauf-Separatoren

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

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

Ich weiß, dass Sie white-space: normal; verwenden können, aber dies lässt Sie <br> nicht dort, wo Sie es möchten.

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

Gibt es eine Möglichkeit, die neue Zeile in die Schaltfläche einzufügen, die ich auswähle?

d.h.

zeile eins

zeile zwei

22

Obwohl ich nicht beweisen kann, dass dies nicht möglich ist, ist es keine gute Idee, zu versuchen, die input-Schaltfläche mit mehreren Zeilen zu belegen. Zuallererst sagt die HTML5-Spezifikation nur das value-Attribut:

Wenn das Element ein Wertattribut hat, muss die Beschriftung der Schaltfläche der Wert dieses Attributs sein

Beachten Sie, dass "Tastenbezeichnung" nirgendwo in der Spezifikation definiert ist. Das heißt, es liegt an den Browser-Anbietern, zu entscheiden, wie sie interpretiert werden sollen, und es bedeutet auch, dass sie ihre Interpretation nach Belieben ändern können.

Sie haben gerade gesehen, wie das Chrome-Team sich für eine solche Änderung entschieden hat. Es könnte wieder passieren, vielleicht in einem anderen Browser. Daher ist jede Lösung, die Sie jetzt finden, nicht dauerhaft und den Launen der Browseranbieter unterworfen.

Deshalb empfehle ich dringend, das <button>-Element zu verwenden. Die Spezifikation gewährleistet, dass Sie HTML-Formatierungen wie Zeilenumbrüche ausführen können.

20
rvighne

@aardrian hat die richtige Richtung angegeben, Sie müssen auch -webkit-appearance als none setzen, um bestimmte Form der Eingabe zu entfernen.

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

Sie können die Breite ändern, um mehr Wörter in jeder Zeile zuzulassen.

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

Es scheint, dass es keine Möglichkeit gibt, HTML in den Wert einzufügen. Der Wert Wert wird immer bereinigt:

Das value-Inhaltsattribut gibt den Standardwert der Eingabe an Element. Wenn das value-Inhaltsattribut hinzugefügt, festgelegt oder entfernt wird, Wenn das Dirty-Value-Flag des Steuerelements false ist, muss der Benutzeragent .__ festlegen. der Wert des Elements auf den Wert des value-Inhaltsattributs Wenn es eine gibt, oder die leere Zeichenfolge, und führen Sie dann die .__ aus. Istwert-Desinfektionsalgorithmus, falls definiert.

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

8
stig-js

Hacken:

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

Die Breite sollte dem längsten Wort entsprechen. Dies erlaubt keine willkürlichen Zeilenumbrüche.

Bessere Lösung: Verwenden Sie <button>.

3
aardrian

Verwenden Sie stattdessen <button type=submit>.

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

3
c-smile

Könnte das nützlich sein? Nicht genau das, was Sie gefragt haben, ich weiß ...

(beachten Sie auch den Schriftunterschied da ich ein paar Upvotes bekam, kümmerte ich mich um die Ausgabe der Schrift

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.

Nach meinem Verständnis ist es nicht möglich, mit Eingaben das zu erreichen, was Sie wünschen. Das Attribut "value" behandelt alles, was sich darin befindet, als eine Zeichenfolge, die auf dem Bildschirm ausgedruckt werden soll. Daher werden alle <br />-Tags nur als Text behandelt und nicht als HTML dargestellt. Es akzeptiert keine Escape-Zeichen.

Die beste Option ist die Verwendung der Schaltfläche, wie von c-smile vorgeschlagen, oder Sie können ein div erstellen, nach Ihren Wünschen gestalten und bei Klick ein Javascript hinzufügen, das eine Formularübermittlung verursacht.

Alternativ, wenn Sie der festen Überzeugung sind, dass Sie Eingaben verwenden müssen, können Sie ein wenig Javascript verwenden (dies ist nur der Fall, wenn Sie nicht wissen, welche Wörter die Breite nicht kennen).

Für die Aufzeichnung empfehle ich dringend, einfach eine Schaltfläche zu verwenden. So wird es gemacht:

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"/>
    
    
   

Wenn Sie die Breite kennen, entfernen Sie das Javascript und fügen Sie Ihrem Eingabeelement Breite in css hinzu.

2
Bojan

Etwas von einem Hack, aber Sie könnten reguläre Leerzeichen verwenden, in denen die Linie unterbrochen werden soll, und nbsp, wo Sie dies nicht tun. 

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;
}

Sie können dem Button eine eigene Breite zuweisen.

0
Tuks