Work around iPad's limitations.

Antoine Goutenoir
1 parent 91751451
Showing 1 changed file with 47 additions and 0 deletions Show diff stats
flaskr/templates/estimate.html
@@ -100,3 +100,50 @@
     <div class="col-md-2"></div>
 </div>
 {% endblock %}
+
+{% block js %}
+<script type="text/javascript">
+
+// Multiline placeholders for textarea shim (eg: iPad)
+// https://github.com/EmilMoe/multiline-placeholder
+$(function() {
+  var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+
+  // Disable for chrome which already supports multiline
+  if (! ((!!window.chrome) && !isOpera)) {
+    var style = $('<style>textarea[data-placeholder].active { color: #666; }</style>')
+    $('html > head').append(style);
+
+    $('textarea[placeholder]').each(function(index) {
+      var text  = $(this).attr('placeholder');
+      var match = /\r|\n/.exec(text);
+
+      if (! match)
+        return;
+
+      $(this).attr('placeholder', '');
+      $(this).attr('data-placeholder', text);
+      $(this).addClass('active');
+      $(this).val(text);
+    });
+
+    $('textarea[data-placeholder]').on('focus', function() {
+      if ($(this).attr('data-placeholder') === $(this).val()) {
+        $(this).attr('data-placeholder', $(this).val());
+        $(this).val('');
+        $(this).removeClass('active');
+      }
+    });
+
+    $('textarea[data-placeholder]').on('blur', function() {
+      if ($(this).val() === '') {
+        var text = $(this).attr('data-placeholder');
+        $(this).val(text);
+        $(this).addClass('active');
+      }
+    });
+  }
+});
+
+</script>
+{% endblock %}