Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "what are the highly adaptive methods of textarea in the front end?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what are the highly adaptive methods of textarea in the front end?"

Option one

HTML5 Textarea element

1. Automatically gain focus

Click on the editor to automatically get focus after the cursor jumps to the front, why?

Check that there are attributes of selectionEnd and selectionStart in the MDN,textarea element of the document to indicate the start and end position of the selected text. The DOM interface instance is HTMLTextAreaElement, which has a setSelectionRange method to select the text in the input box. Usage: TextAreaElement.setSelectionRange (selectionStart, selectionEnd, [optional] selectionDirection)

So all we have to do is selectionStart = = selectionEnd = = value.length so that the cursor is selected to the end.

Edit.addEventListener ("click", function () {txt.classList.add ("hidden"); document.body.insertBefore (textarea, edit); textarea [XSS _ clean] = "this is the information to be edited"; textarea.focus (); / / textarea.selectionEnd = textarea [XSS _ clean] .length; textarea.setSelectionRange (textarea [XSS _ clean] .length, textarea [XSS _ clean]. Length);})

two。 Adaptive height

Line wrapping will appear when the height is not set, so as long as the textarea scroll bar disappears and its height = scrollHieght, then how to listen for changes in textarea requires the input event to make the height of textarea dynamic equal to its scrollHeight. The code is as follows:

Textarea.addEventListener ("input", function () {this.style.height = `$ {this.scrollHeight} px`;})

Why each input will make the height increase (each increase 4px), after testing the same effect of Safari, Firefox in line with the expected height does not increase abnormally, check the Chrome console found that textarea built-in a lot of styles, try to remove padding, you can normally increase with the content highly adaptive.

Textarea {padding: 0;} const textarea = document.createElement ("textarea"); textarea.addEventListener ("input", function (e) {this.style.height = `$ {this.scrollHeight} px`;})

Why do you remove the padding value and the height does not increase after input? (no reasonable explanation has been found, please leave a message for discussion.)

However, in the case of deleting text, height does not automatically zoom, analyze the reason, when deleting text wrapping, the size of scrollHeight does not change, scrollHeight as a read-only attribute (MDN- document), how to make scrollHeight height recalculated? Only change the height, so:

Textarea.addEventListener ("input", function (e) {this.style.height = "inherit"; this.style.height = `$ {this.scrollHeight} px`;})

At this point, the highly adaptive input is complete, but the flash of each line break is very uncomfortable, and transition walks through a wave.

Textarea {overflow: hidden; / / prevent scroll bar flickering in line wrapping padding: 5px 10px; box-sizing: border-box; transition: all 0.2s linear;}

As a result, transition has no effect, because the height initial value or reference value must be numeric transition animation will not take effect, height is set to auto or inherit animation will not take effect, so the compromise is to reset the height when deleting, do not need to reset when input, so the animation takes effect when input, deletion without animation, do not think of a better way.

Textarea.addEventListener ("keyup", function (e) {if (e.keyCode = 8) {this.style.height = "inherit"; this.style.height = `$ {this.scrollHeight} px`;} else {this.style.height = `${this.scrollHeight} px`;}})

3. Support for pasting text, pictures, etc.

Textarea can only enter text, but cannot paste pictures.

Textarea.addEventListener ("paste", function (e) {e.preventDefault (); console.log ("paste", e.clipboardData.items, e.clipboardData.types, e.clipboardData.getData ("text/html"), e.clipboardData.getData ("text/plain"), e.clipboardData.getData ("text/Files"));}, false)

Option 2

Div contenteditable replaces textarea

1. Automatically gain focus

Edit div contenteditable to true, and then use the Range and Selection cursor to move to the final effect.

Edit.addEventListener ("click", () = > {textarea.setAttribute ("contenteditable", true); textarea.focus (); const range = document.createRange (); / / content contained in range range.selectNodeContents (textarea); / / range.setStart (textarea.firstChild, 0); / / range.setStart (textarea.lastChild, textarea [XSS _ clean] .length); / / whether the starting position is the same range.collapse (false); const sel = window.getSelection () / / remove all areas from the selection. Sel.removeAllRanges (); / / an area (Range) object will be added to the selection. Sel.addRange (range);})

two。 Adaptive height

Div contenteditable naturally supports adapting height according to input.

3. Paste pictures, text, etc.

Textarea.addEventListener ("paste", function (e) {e.preventDefault (); const clipboardData = e.clipboardData | | e.materialEvent.clipboardData); / / get plain text let text = clipboardData.getData ("text/plain"); let file = clipboardData.getData ("text/plain"); / / console.log (clipboardData.items, clipboardData.getData ("text/Files")); / / insert img to do some operations for uploading images insertImg (clipboardData) / / enter only plain text document.execCommand ("insertText", false, text);})

This method can be limited to uploading only text or pictures.

The above is about the content of this article on "what are the highly adaptive methods of textarea in the front end". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.