Можете ли вы иметь многострочный текст HTML5-заполнителя в <textarea>? - PullRequest
Новая
       40

Можете ли вы иметь многострочный текст HTML5-заполнителя в <textarea>?

144 голосов
/ 25 августа 2011

У меня есть текст-привидение в текстовых полях, которые исчезают, когда вы фокусируете их, используя атрибут-заполнитель HTML5: 

<input type="text" name="email" placeholder="Enter email"/>

Я хочу использовать тот же механизм для создания многострочного текста-заполнителя в текстовой области, возможно, что-то вроде этого: 

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

Но эти \n отображаются в тексте и не вызывают новых строк ... Есть ли способ иметь многострочный заполнитель?

ОБНОВЛЕНИЕ : Единственный способ заставить это работать - использовать плагин jQuery Watermark , который принимает HTML в тексте заполнителя: 

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Ответы [ 14 ]

0 голосов
/ 01 июня 2018

в php с функцией chr (13): 

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';
0 голосов
/ 30 марта 2017

Watermark Solution в оригинальном посте прекрасно работает. Спасибо за это. В случае, если это кому-то нужно, вот угловая директива для него. 

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());
0 голосов
/ 09 апреля 2015

Bootstrap + contenteditable + многострочный заполнитель

Демонстрация: https://jsfiddle.net/39mptojs/4/

на основе ответов @cyrbil и @daniel

Использование Bootstrap,jQuery и https://github.com/gr2m/bootstrap-expandable-input для включения заполнителя в contenteditable.

Использование javascript «замена заполнителя» и добавление «white-space: pre» к css, показывается многострочный заполнитель.

Html: 

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

Javascript: 

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

Css: 

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}
0 голосов
/ 25 августа 2011

Я не думаю, что это возможно только с помощью html / css.Это может быть возможно с использованием JavaScript или другого вида взлома - дополнительные пробелы для переноса текста на следующую строку и т. Д.

Страница:
...