multiline placeholder

[theraaz]

It would be good if multiline placeholder was supported for textarea with \n or something

[fidian]

I can see situations where this would be useful, such as showing an expected address format or something. However it breaks compatibility with HTML: https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

The attribute, if specified, must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.

That said, it appears that browsers do allow you to use &#10 but there is no way to do it cross-browser very easily. Sometimes embedding actual newlines in the value might also work. More info from a StackOverflow post: http://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea

I am going to close this issue because it is going against the HTML spec even though the idea could be extremely useful. If anyone decides to hack in the code, I am open to receiving pull requests that make this functionality much easier and more cross-browser. The biggest hurdle is making it work for all browsers and especially when not shimmed (or we have to detect the values and decide on a field-basis whether or not we shim).

[theraaz]

I found a workaround that is working for me. https://gist.github.com/theraaz/5e900c084ebac454162e

[fidian]

Reopening this ticket. That solution is about what I do for browsers that do not support placeholders. I could incorporate their selector and still patch textareas even if the browser does support placeholders. There are still some difficult things:

1. This has to be thoroughly tested cross-browser and I don't really have easy access to a wide enough range of browsers. Though this is really the least of my issues.
2. Newline selection. The code you referenced uses $('textarea[placeholder*="\\n"]').each(function(){. I believe one should not use \n but instead use &#10. The HTML spec favors attributes with HTML encoded values, despite what I prefer. I'd like to stick with standards whenever possible.
3. Browser feature detection of the placeholders that do and do not support newlines has now gotten far more tricky. This module should not be shimming a browser that fully supports newlines as expected.

[plaa]

The above workaround as an Angular directive (in CoffeeScript):

angular.module('app.directives').directive 'multilinePlaceholder', ($timeout) ->
  return {
    restrict: 'A',
    link: ($scope, element, attr) ->
      element.on 'focus', ->
        element.removeClass("placeholder")
        if element.val() == attr.multilinePlaceholder.replace(/\\n/g, "\n")
          element.val("")
      element.on 'blur', ->
        if element.val() == ""
          element.addClass("placeholder")
          element.val(attr.multilinePlaceholder.replace(/\\n/g, "\n"))
      
      $timeout -> 
        element.blur()
  }

Usage:

<textarea multiline-placeholder="one line\nsecond line\nthird line"></textarea>