Home Web Front-end HTML Tutorial After the HTML page is loaded, adjust the height of the element according to the content_html/css_WEB-ITnose

After the HTML page is loaded, adjust the height of the element according to the content_html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM
element content load Adjustment

Suppose I have a textarea element in my HTML and I want to adjust its height based on the content after it loads. How to do it?

1. The textarea element I defined is as follows

<textarea class="form-control" type="text" name="value" id="value"          placeholder="输入参数值"></textarea>
Copy after login
Note: id = 'value'


The key question here is There are two methods to determine which function will be called after the html is loaded:

2.1 Method 1: By calling $(document).ready(function () {} )

<script type="text/javascript">    function get_text_rows(text) {        return text.split("\n").length;    }        $(document).ready(function () {        document.getElementById('value').rows = get_text_rows($('#value').val());    });</script>
Copy after login

2.2 Method 2: By calling window.onload
<script type="text/javascript">    function get_text_rows(text) {        return text.split("\n").length;    }        window.onload = function() {        document.getElementById('value').rows = get_text_rows($('#value').val());    }</script>
Copy after login

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1254
29
C# Tutorial
1228
24
Error loading plugin in Illustrator [Fixed] Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

How to solve the problem of missing 1920x1080 resolution in Win10 How to solve the problem of missing 1920x1080 resolution in Win10 Jan 06, 2024 am 09:08 AM

The win10 system is a very excellent system, and its strong stability is the most powerful part of the system. Today, the editor brings you a solution to the problem that the win10 resolution does not have 1920x1080! Let's take a look together if necessary. Solution to the problem that the resolution of win10 system is not 1920x1080: Note: The problem that the resolution of win10 is not 1920x1080 is caused by the graphics card driver! So I just need to update the graphics card driver. (The specific steps are as follows) 1. Right-click the computer and select Manage to open. 2. Find the device manager from the left side of the opened management interface. 3. Continue to find the display adapter from the left side in the opened device manager interface and open it. 4. Finally, right-click and select

Stremio subtitles not working; error loading subtitles Stremio subtitles not working; error loading subtitles Feb 24, 2024 am 09:50 AM

Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like

How to change web page zoom ratio in Edge browser How to change web page zoom ratio in Edge browser Jan 29, 2024 pm 09:06 PM

How to adjust the web page display ratio of the Edge browser? When we use the edge browser, if we want to adjust the web page display ratio, how should we adjust it? Let’s introduce it below! When we use the edge browser to browse the web, the text on some web pages is relatively small. In this case, we can adjust the web page proportion to enlarge the entire page so that we can clearly see the text. So what is the specific operation? Let me introduce it below! If not, let’s read on! Tips for adjusting the display ratio of Edge browser web pages: 1. After using Edge browser to open the web page that needs to be enlarged, click the "Settings and Others" icon consisting of three dots in the upper right corner of the browser. 2. Then find the “Zoom” option in the Edge browser menu window that pops up below.

How to adjust the subtitles of National K-song How to adjust the subtitles of National K-song Feb 23, 2024 pm 07:16 PM

How to adjust the subtitles of karaoke? The subtitles of lyrics can be adjusted in the National Karaoke APP, but many users do not know how to adjust the subtitles of Karaoke moments. The latest solutions to the problems will be continuously sorted out below. Next is the National Karaoke that the editor brings to users. Here is a graphic tutorial on how to adjust subtitles. Interested users can take a look together! Tutorial on the use of National Karaoke. How to adjust the subtitles of National Karaoke. 1. First open the Universal Karaoke APP, switch to the [Voice Sing] section on the main page, select your favorite song and click [K Song]; 2. Then switch to the Karaoke page, Click the red button [Start Singing] at the bottom; 3. Then on the latest page, click the [three dots] function in the upper right corner; 4. Finally, expand the function bar at the bottom and select [Font Size] to adjust

How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method Mar 13, 2024 pm 04:49 PM

CheatEngine is a game editor that can edit and modify the game's memory. However, its default language is non-Chinese, which is inconvenient for many friends. So how to set Chinese in CheatEngine? Today, the editor will give you a detailed introduction to how to set up Chinese in CheatEngine. I hope it can help you. Setting method one: 1. Double-click to open the software and click "edit" in the upper left corner. 2. Then click “settings” in the option list below. 3. In the opened window interface, click "languages" in the left column

Outlook freezes when inserting hyperlink Outlook freezes when inserting hyperlink Feb 19, 2024 pm 03:00 PM

If you encounter freezing issues when inserting hyperlinks into Outlook, it may be due to unstable network connections, old Outlook versions, interference from antivirus software, or add-in conflicts. These factors may cause Outlook to fail to handle hyperlink operations properly. Fix Outlook freezes when inserting hyperlinks Use the following fixes to fix Outlook freezes when inserting hyperlinks: Check installed add-ins Update Outlook Temporarily disable your antivirus software and then try creating a new user profile Fix Office apps Program Uninstall and reinstall Office Let’s get started. 1] Check the installed add-ins. It may be that an add-in installed in Outlook is causing the problem.

See all articles