Writing in the front

So, in my very quiet CSS group (group number: 82991297) I suddenly saw someone asking a question.

How to achieve this with CSS: How to achieve highly adaptive textarea?

At that time, WHEN I saw this problem, I only had one idea in mind, this baidu is enough, do not need to use Google search which many technical personnel like to use. However, the key point here is “how to do it with CSS”.

Can you do it with CSS?

This is a problem, can search results are necessarily through THE JS way to achieve, and no one will mention the use of CSS to achieve, after all, with CSS really can not achieve ah. CSS is mainly used to layout and decorate pages, but it is not a panacea.

thinking

Yes, not everything CSS can not meet this “adaptive” requirements, so how to achieve it. In fact, the need for “adaptive” heights has always been sought after, most commonly in the past when someone would occasionally say how a div ADAPTS to heights.

For a div with an adaptive height, it’s as simple as not setting the height. If the div element has a float attribute, close the div element (clear the float); Of course, if you use position: absolute; Then forget about adaptive height.

Assume a non-input element implementation

Non-input elements (other than input and Textarea) can be implemented using the Contenteditable property to make an element editable and inputable, enabling what is known as adaptive height input boxes.

<div contenteditable></div>Copy the code

A simple sentence will suffice. For compatibility, go directly to caniuse.com/#search=con… Here’s the website.

  • IE ✔

  • Edge ✔

  • – 2+ ◒ 3+ ✔ 3.5+

  • Chrome ✔

  • Safari ✔

  • Opera ✔

Look awesome, you can hit full marks 💯!

How is the Textarea element implemented

Some people may want to semantic tag, must use textarea to achieve; It could also be argued that adding contenteditable with non-input elements would allow for input and height adaptation, but would there be a performance problem, or perhaps a compatibility problem, as some browsers do not support it.

Yes, sometimes thinking about something, there will always be some contingency, for such contingency, we just use the Textarea text input box.

So the question comes back, how do you achieve the adaptive height of the Textarea.

In fact, this problem is also simple, it is good to use JS, and now there are too many JS codes on the network can meet, so, there is no what to say, Baidu will know.

One of these results is satisfying. If not, check it out on Google.

If you are not satisfied with your answer in Chinese, you can use English words.

Anyway, no matter how, find the result is very much, but specific how screening or see you yourself.

Try writing your own

A lot of people know, small chi I am just a little CSS, but not JS people, so, I have been unable to find a good job, blame myself, well, is my own fault.

So I thought, why don’t I try it for myself?

<textarea id="ta" rows="1"></textarea>Copy the code
function $(id) {
  return document.getElementById(id);
}

$("ta").onkeyup = function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + "px";
}Copy the code
textarea {
    display: block;
    width: 300px;
    height: 34px;
    overflow: hidden;
    padding: 5px 10px;
    margin: 30px auto 0;
    resize: none;
    line-height: 24px;
    font-size: 16px;
    color: # 666;
    border: 1px solid #ccc;
    outline: 0 none;
    box-shadow: 0 0 5px # 999;
    border-radius: 3px;
    box-sizing: border-box;
    transition: all 200ms linear;
}

textarea:focus {
    color: #277fe4;
    border-color: #2196f3;
    box-shadow: 0 0 5px #03a9f4;
}Copy the code

I didn’t want to use keyUp and put in both change and KeyDown, but I thought it would be enough to just use KeyUp, so THAT’s it, and I’m happy with the results. Just don’t know what compatibility will be 😅.

But here I really feel that I this JS is very problematic, this is too simple point is not it. 😁

this.style.height = 'auto';Copy the code

Without this sentence, when the content of the input box is reduced, the height cannot be shrunk back; Height: auto; I’m not going to be able to make the transition, and it’s not comfortable.

Oh, there’s another case where in the Textarea tag I give a rows=”1″ attribute. This controls the number of lines in the textarea, which would be like this if it were missing.

If I do anything, the height of the input box changes, but I don’t return to the second row, so I add rows=”1″, just to make it feel better.

The last

Feel this article is for the “political” task and write, haven’t updated the public number for a long time, the in the mind feels little something like. In fact, sometimes think about writing CSS, there are some new content, are drafts and so on, browser support is a problem, come out to say it is just that; Write some old content, in fact, the Internet search for a large, quite contradictory.

After chatting with friends, they said, this public number you are when their own blog to use, so why care so much, want to write what to write what.

Think also, there are some do not want to write too much, just in the small close circle casually write a little fun, occasionally in the public number more nonsense a few words.

The weekend is coming. Have a nice weekend!