html<textarea>根据输入自适应高度

最新推荐文章于 2024-10-14 17:30:36 发布
原创 最新推荐文章于 2024-10-14 17:30:36 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用ASP.NET和JavaScript实现的文本区域自适应高度功能，通过监听输入事件来动态调整文本区域的高度，确保其能根据内容自动扩展或收缩。 


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TEST2.aspx.cs" Inherits="BDMonitor.TEST2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"
 ><head runat="server"> <title></title></head>



<script type="text/javascript">
    var lastlen = 0;
	function shorten(o) {
	    var len = o.value.length;
	    if (len < lastlen) {
	        o.style.height = 0 + "px";
	        o.style.height = o.scrollHeight + "px";
	    }
	    lastlen = len;
	}
	function extend(o) {
	   if (o.offsetHeight < o.scrollHeight) {
	       o.style.height = o.scrollTop + o.scrollHeight + "px";
	   }
	}
  </script>
<body> <form id="form1" runat="server"> <textarea  onpropertychange="extend(this)" oninput="extend(this)" onkeyup= "shorten(this)" style=" height:15px;font-size:14px;
borger:1px solid green; overflow:hidden; "></textarea>
 </form>



</body>
</html>










                

        

    


  



    

      

        

            

              
                
                  jimi_panda
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
基于Java+Vue养老院老人健康监护平台（源码+文档+包运行）

				
			

			

				

					2401_84411433的博客
				

				

					04-27
					
					1143
					
				

			

		

		

			
				
根据养老院老人健康监护管理的需求开发功能模块，实现对信息数据的添加、删除、修改、查询等基本操作，能够极大的提高养老院老人健康监护管理效率。通过本系统可以实现养老院老人健康监护管理的全过程，本系统主要的功能模块设计包括：用户管理，老人管理，食药记录管理，身体指标管理，体检病例管理，留言管理等。

			
		

	



                

            
              



	

		

			

				
					
Vue下textarea文本框根据内容自适应改变高度

				
			

			

				

					10-20
				

			

		

		

			
				
总的来说，创建Vue自定义组件`AutoHeightTextarea`可以方便地实现textarea根据内容自适应高度的效果，同时通过针对性的兼容性处理，可以确保在各种浏览器环境中都有良好的表现。在实际项目中，这样的组件可以大大...

			
		

	



              


  
              

                


	

		

			

				
					
textarea文本域宽度和高度（width、height）自己主动适应变化处理

				
			

			

				

					weixin_30328063的博客
				

				

					09-19
					
					945
					
				

			

		

		

			
				
文章来源：http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html



<HTML>
<HEAD>
<TITLE>textarea宽度、高度自己主动适应处理方法</TITLE>
<!-- 控制宽度的自己主动适应 -->
<style type="text...

			
		

	





	

		

			

				
					
html文本框自适应高度,文本框根据输入内容自适应高度 (没有滚动条)

				
			

			

				

					weixin_35626408的博客
				

				

					06-03
					
					716
					
				

			

		

		

			
				
文本框根据输入内容自适应高度h2 {text-align: center;margin: 50px auto;}#textarea {display: block;margin: 0 auto;overflow: hidden;width: 550px;font-size: 14px;height: 18px;line-height: 24px;padding: 2px;}textarea {ou...

			
		

	



		

			
		



	

		

			

				
					
html5  textarea 文本框根据输入内容自适应高度

				
			

			

				

					weixin_30656145的博客
				

				

					09-24
					
					789
					
				

			

		

		

			
				
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>文本框根据输入内容自...

			
		

	





	

		

			

				
					
文本输入框自适应高度

				
			

			

				

					weixin_34198762的博客
				

				

					06-23
					
					201
					
				

			

		

		

			
				


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
    &lt;HTML&gt;

    &lt;HEAD&gt;
        &lt;meta http-equiv="Content-Type" content=

			
		

	





	

		

			

				
					
Textarea根据内容自适应高度

				
			

			

				

					09-04
				

			

		

		

			
				
这个功能可以通过JavaScript来实现，正如标题“Textarea根据内容自适应高度”所描述的那样。本文将详细介绍如何使用JavaScript来控制`Textarea`的内容自适应高度，并提供相关代码示例。  首先，我们来看一下提供的...

			
		

	





	

		

			

				
					
<textarea>没有高度

				
			

			

				

					04-28
				

			

		

		

			
				
<think>好的，用户的问题是关于HTML中的textarea元素没有高度的情况，需要找出原因并提供解决方案。首先，我需要回顾之前的对话，确保这次回答能结合之前的建议，同时参考用户提供的三个引用内容。  用户之前的问题...

			
		

	





	

		

			

				
					
  <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
        }
        .content-box {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="content-box">
        <h1>欢迎来到我的网页</h1>
        
        <h2>简介</h2>
        <p>这是一个响应式网页设计示例，包含各种常用HTML元素。</p>
        
        <h2>功能展示</h2>
        <ul>
            <li>响应式布局</li>
            <li>基本样式设计</li>
            <li>图片展示</li>
            <li>表格示例</li>
        </ul>

        <h2>图片展示</h2>
        <img src="https://picsum.photos/600/400" alt="示例图片">

        <h2>数据表格</h2>
        <table border="1" cellpadding="8">
            <tr>
                <th>项目</th>
                <th>数量</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>苹果</td>
                <td>5</td>
                <td>¥20</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>3</td>
                <td>¥15</td>
            </tr>
        </table>

        <h2>联系表单</h2>
        <form>
            <label>姓名：</label>
            <input type="text" placeholder="请输入姓名"><br><br>
            
            <label>邮箱：</label>
            <input type="email" required><br><br>
            
            <label>留言：</label><br>
            <textarea rows="4" cols="50"></textarea><br><br>
            
            <button type="submit">提交</button>
        </form>
    </div>
</body>
</html>

					
最新发布

				
			

			

				

					05-02
				

			

		

		

			
				
图片部分用`<figure>`标签，表格用`<table>`并添加响应式容器，表单则分步骤设计，包括个人信息和偏好设置，使用不同的输入类型。  然后，样式部分需要处理各部分的响应式。例如，导航栏在大屏幕上水平排列，小屏幕...

			
		

	





	

		

			

				
					
css textarea 高度自适应,无滚动条

				
			

			

				

					09-27
				

			

		

		

			
				
有时候，我们希望`textarea`的高度能够根据用户输入的内容自动调整，从而避免出现滚动条，提供更好的用户体验。以下是如何使用CSS来实现`textarea`高度自适应的方法。  首先，我们可以设置`textarea`的基本样式，...

			
		

	





	

		

			

				
					
div模拟textarea，解决高度自适应

				
			

			

				

					11-28
				

			

		

		

			
				
解决textarea文字太多无法高度自适应问题，使用div模拟textarea

			
		

	





	

		

			

				
					
html5 textarea高度自适应,textarea 高度自适应的两种方案

				
			

			

				

					weixin_27310417的博客
				

				

					06-20
					
					806
					
				

			

		

		

			
				
原标题：textarea 高度自适应的两种方案本文转载于 SegmentFault 社区社区专栏：前端学习路-郭盖作者： 郭盖阅读全文你将获得以下解决方案：1. 点击长文本编辑textarea，自动获得焦点2. 随着输入值自动伸缩高度3. 可复制添加信息4. 可粘贴文本5. 可粘贴图片以下实例代码执行环境为 Chrome80方案一HTML5 Textarea 元素1. 自动获得焦点点击编辑自动获得...

			
		

	





	

		

			

				
					
实现HTML中的textarea元素自适应高度

				
			

			

				

					weixin_55513715的博客
				

				

					04-21
					
					437
					
				

			

		

		

			
				
【代码】实现HTML中的textarea元素自适应高度。

			
		

	





	

		

			

				
					
Html-textarea 自动高度

				
			

			

				

					qq_26318597的博客
				

				

					09-08
					
					959
					
				

			

		

		

			
				
textarea自动高度功能

			
		

	





	

		

			

				
					
HTML用textarea实现多行输入自动调整输入框高度

				
			

			

				

					ydk1203的博客
				

				

					10-14
					
					498
					
				

			

		

		

			
				
简单实现了一个textarea多行输入时的输入框高度自动调整

			
		

	





	

		

			

				
					
textarea跟随内容自动调整高度

				
			

			

				

					苦夏木禾
				

				

					10-14
					
					2382
					
				

			

		

		

			
				
通过监听的 input 事件，当用户输入内容时，先将其高度设置为auto，然后再设置为其，这样就可以实现随着内容的增加自动调整高度。这种方法可以确保的高度始终适应其内容，避免出现滚动条或内容被截断的情况。同时，通过设置和，可以防止用户手动调整的大小和出现滚动条。

			
		

	





	

		

			

				
					
HTML textarea高度自适应

				
			

			

				

					leng0920的博客
				

				

					01-16
					
					613
					
				

			

		

		

			
				
html:

<textarea name="textarea"id="textarea_id"style='overflow-y: hidden;height:30px'onpropertychange="this.style.height = this.scrollHeight + 'px';"oninput="this.style.height = this.scrollHe...

			
		

	





	

		

			

				
					
textarea高度自适应的两种方案

				
			

			

				

					高先生的猫
				

				

					09-11
					
					3380
					
				

			

		

		

			
				
方案一

html5 Textarea 元素

1. 自动获得焦点

点击编辑自动获得焦点后光标跳转到了最前面，why?

查文档MDN，textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置，DOM接口实例是htmlTextAreaElement， 它具有setSelectionRange方法，用来选中输入框中的文本，用法：


TextAreaElement.setSelectionRange(selectionStart, se...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值