it-swarm.com.ru

Создайте тип ввода = "кнопка" с двумя строками текста для более новой версии Chrome

Я приму ответ «невозможно», если кто-то может объяснить, почему. Тем не менее, я не буду, кроме ответа с использованием <button>, потому что это не то, что этот вопрос задает.

Я пытаюсь сделать кнопку ввода с двумя строками слов, но более новые версии Chrome не позволяют мне, вот что я попробовал:

Сепараторы возврата каретки

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

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

Я знаю, что вы можете использовать white-space: normal;, но это не позволит вам <br> там, где вы этого хотите.

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

Есть ли способ, которым я могу добавить новую строку в кнопку, где я выбираю?

то есть.

первая строка

вторая строка

22
Adam Buchanan Smith

Хотя я не могу доказать, что это невозможно, не стоит пытаться заставить кнопку input занимать несколько строк. Прежде всего, спецификация HTML5 говорит только об атрибуте value:

Если элемент имеет атрибут value, метка кнопки должна быть значением этого атрибута.

Обратите внимание, что «метка кнопки» не определена нигде в спецификации. Это означает, что поставщики браузеров сами выбирают, как это интерпретировать, и это также означает, что они могут изменить свою интерпретацию по желанию.

Вы только что стали свидетелями того, как команда Chrome решила сделать такое изменение. Это может произойти снова, возможно, в другом браузере. Поэтому любое решение, которое вы найдете сейчас, не будет постоянным и подчиняется прихотям поставщиков браузеров.

Вот почему я настоятельно рекомендую использовать элемент <button>. Потому что это гарантировано спецификацией, позволяющей вам выполнять форматирование HTML, например разрывы строк.

20
rvighne

@aardrian указал правильное направление, вы также должны установить -webkit-appearance как none, чтобы удалить конкретный стиль ввода.

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

Вы можете изменить ширину, чтобы в каждой строке было больше слов.

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

Кажется, что нет никакого способа добавить html в значение, значение value всегда очищается:

Атрибут value value дает значение по умолчанию для ввода элемент. Когда атрибут содержимого значения добавлен, установлен или удален, если флаг грязного значения элемента управления имеет значение false, пользовательский агент должен установить значение элемента к значению атрибута содержимого значения, если он есть, или пустая строка в противном случае, а затем запустите алгоритм санации текущего значения, если он определен.

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

8
stig-js

Hack:

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

Ширина должна соответствовать самому длинному Слову. Это не допускает произвольных разрывов строк.

Лучшее решение: используйте <button>.

3
aardrian

Вместо этого используйте <button type=submit>.

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

3
c-smile

Может ли это быть полезным? Не совсем то, что вы спросили, я знаю ...

(обратите внимание на разницу шрифтов так как я получил несколько голосов, я позаботился о проблеме шрифта)

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.

Насколько я понимаю, невозможно достичь желаемого с помощью ввода. Атрибут «value» будет обрабатывать все внутри как строку, которая должна быть выведена на экран. Таким образом, любые теги <br /> будут обрабатываться как текст и не будут отображаться как HTML. Он не принимает никаких escape-символов.

Лучше всего использовать кнопку, как предлагает c-smile, или вы можете создать div, стилизовать его по своему вкусу и добавить javascript при нажатии, что приведет к отправке формы.

В качестве альтернативы, если вы твердо уверены, что вам нужно использовать ввод, вы можете сделать немного javascript (это только в том случае, если вы не знаете, что это за слова, ширина неизвестна).

Для записи я настоятельно советую просто использовать кнопку, вот как вы это делаете:

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

Если вы знаете ширину, то удалите JavaScript и добавьте ширину на CSS к вашему элементу ввода.

2
Bojan

Что-то вроде хака, но вы можете использовать обычные пробелы, где вы хотите, чтобы линия разрывалась, и nbsp, где вы этого не делаете, - тогда просто убедитесь, что ширина установлена ​​для правильного размещения. 

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

Вы можете указать свою ширину для кнопки.

0
Tuks