2

Перерыл пол гугла - не понял как можно сделать placeholder в несколько строк у <textarea>

5
  • jsfiddle.net/VescJ Не очень код?
    – ferrari
    25 авг 2013 в 19:28
  • если например, хочется написать в textarea то что в placeholder ? например "placeline" :) надо получше проверять input, ну и newline можно существенно упростить используя replace.
    – zb'
    25 авг 2013 в 19:37
  • ну и аттрибут myholder - не стандартный, лучше используйте data-myholder. и обращайтесь к нему $element.data('myholder');
    – zb'
    25 авг 2013 в 19:41
  • @Олег Б кстати, что за дурацкий способ ссылаться на $(this) вот таким образом ? $('textarea').eq(a)
    – zb'
    25 авг 2013 в 22:46
  • @Олег Б - вот я поправил основные недочеты вашего кода, jsfiddle.net/oceog/VescJ/3 в общем, используйте var, используйте просто var $this=$(this); вместо той монстроидной конструкции, не используйте нестандарных элементов, лучше используйте data, старайтесь по поводу одного и того-же элемента делать поиск в dom всего один раз.
    – zb'
    25 авг 2013 в 22:54

4 ответа 4

5

Есть очень простой способ: сделать переводы строк при формировании html.

<textarea rows="5" placeholder="Первая строка
Вторая строка
Третья строка"></textarea>

Пример многострочного placeholder

2

Многострочный placeholder, который работает во всех браузерах, включая Firefox. К тому же очень легко настроить внешний вид.

У такого способа есть свои недостатки, но в большинстве случаев они будут не критичны.

Пример на fiddle

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }
	       
});
#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<div id="textAreaWrap">
    
    <textarea id="textArea"></textarea>

    <!-- Check here. If textarea has content -
         set for this div attribute style="display: none;" -->
    <div id="placeholderDiv">Multiline textarea<br>
                             placeholder<br>
                                          <br>
                             that works in Firefox
    </div>
</div>

1
2
  • Сорри что лезу: opera next 16.0.1196.55, ни один пример не работает(
    – ferrari
    25 авг 2013 в 17:53
  • Ну собственно в первой ссылке об это и написано, а вторая это доказывает :] Так что да, оно не работает и не будет работать.
    – RubaXa
    25 авг 2013 в 18:01
0
  textarea::placeholder{
    white-space: pre-wrap;
  }
2
  • 1
    Пожалуйста, напишите более развернутый ответ.
    – Blacit
    14 фев 2020 в 11:51
  • Пример стилей для placeholder. 15 фев 2020 в 16:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.