Google Material Design Growing Textarea while typing

Question

I'm trying to implement Google Material Design Guidelines in my forms and it's working great, until I bumped into the textarea. What I want is this: When you focus on the textarea there is only one line, but when you reach the end of the line (while typing) it automatically adds another line and continues typing there.

I have found this on codepen, but this uses an inputfield, not a textarea. This just scrolls horizontally... Demo

  <input type="text" required>

Anyone who has this code and is willing to share? Thanks

score 3 · Accepted Answer · edited Sep 18 '18 at 08:41

3

You are creating all the Material Design CSS & Jquery by yourself?

Otherwise, I found Material Design textarea like you mentioned in here:

Source: https://materializecss.com/text-inputs.html#textarea

Check out their Textarea part.

edited Sep 18 '18 at 08:41

Iman Mohamadi

6,552
3
34
33

answered Jun 08 '15 at 03:05

yeyene

7,297
1
21
29

Oh this is great man, thanks. Exactly what I was looking for!! I was writing it myself, but with this I can adjust it to my likes. Can't believe I never came across this site while searching. – nclsvh Jun 08 '15 at 14:43
1

Good news! Now Google is offering their MD framework for websites ( like Bootstrap ). Check it out here... http://www.getmdl.io/components/index.html – yeyene Jul 09 '15 at 07:59
it's a 404 for me – Iman Mohamadi Sep 18 '18 at 08:38

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

Actually, to obtain this level of control, and work around the fact that a textarea, on most web browsers, can be resized by hand, you'll want to use a div with the contenteditable attribute.

See the HTML doctor entry on contenteditable for more.

Further, to calculate font sizes and overflow, you might want to use the canvas measureText method, for example using canvas as an offscreen substitute (where you input exactly the same text that is typed inside your contenteditable element).

Finally, while the css lineHeight attribute can somewhat facilitate those calculations, there are a few javascript libraries out there that are dedicated to the purpose. I found Font.js, haven't tested it at the time of this writing.

edited May 23 '17 at 11:52

Community

1
1

answered Dec 19 '15 at 10:43

Mauro Colella

446
6
12

Exactly. A textarea only takes you so far and even frameworks like materialize.css limit you by using a textarea and not a contenteditable div. Do you know a way to make a contenteditable div work/behave visually the same way as a material textarea? I'm trying to achieve the material effects with added functionality (highlighting extra characters beyond text limit, etc.) but haven't been successful so far. – Darth Coder Jul 20 '17 at 15:25
Sorry, haven't looked into that part yet. – Mauro Colella Jul 21 '17 at 04:36

score 0 · Answer 3 · edited Feb 21 '19 at 14:37

You can use <div contentEditable> instead of textarea and that will make a trick. Also you might not use additional libraries (Material-ui, jQuery, etc.).With your code it will look like this:

.inputBlock {
  position: relative;
  margin-top: 20px;
  font-family: 'Roboto';
  display: block;
  width: 300px;
  background: #FFF;
}

.input {
  font-size: 15px;
  padding: 0 0 6px;
  display: block;
  width: 100%;
  height: auto;
  border: none;
  box-sizing: border-box;
  resize: none
}

.input:focus {
  outline: none;
}

/* LABEL */

label {
  color: #777;
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  top: 0;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}


/* active state */

.input:focus~label,
.input:not(:empty)~label {
  top: -15px;
  font-size: 11px;
  color: #00968a;
}


/* BOTTOM BARS */

.bar {
  position: relative;
  display: block;
  width: 100%;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #00968a;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}


/* active state */

.input:focus~.bar:before,
.input:focus~.bar:after {
  width: 50%;
}


/* HIGHLIGHTER */

.highlight {
  position: absolute;
  height: 73%;
  width: 100%;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
  border-bottom: 1px solid #777;
}


/* active state */

.input:focus~.highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
  border: none;
}


/* ANIMATIONS */

@-webkit-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@-moz-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

[class='input textarea'] height: auto !important color: #000000 !important font-size: 15px !important div color: #000000 !important font-size: 15px !important~.highlight height: 77% !important

<div class="inputBlock">
  <div contentEditable class="input" required></div>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Name</label>
</div>

Google Material Design Growing Textarea while typing

3 Answers3