<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定textarea的宽度后，让textarea根据文本的长度自动调整它的高度。</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<br>
方法一：
<textarea rows=1 cols=40 style='overflow:scroll;overflow-y:hidden;overflow-x:hidden'
onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);"></textarea>
<br><br>
方法二：
<script>
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
function ResizeTextarea(a,row){
if(!a){return}
if(!row)
row=5;
var b=a.value.split("\n");
var c=is_ie?1:0;
c+=b.length;
var d=a.cols;
if(d<=20){d=40}
for(var e=0;e<b.length;e++){
if(b[e].length>=d){
c+=Math.ceil(b[e].length/d)
}
}
c=Math.max(c,row);
if(c!=a.rows){
a.rows=c;
}
}
</script>
<textarea style="overflow: hidden; font-family: Verdana,Arial; font-style: normal; font-size: 13px; line-height: normal; " rows="4" cols="30" onfocus="javascript:ResizeTextarea(this,4);" onclick="javascript:ResizeTextarea(this,4);" onkeyup="javascript:ResizeTextarea(this,4);"></textarea>
<br><br>
方法三：
<script type="text/javascript">
//*2
var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $ = function(id){return document.getElementById(id);}
function autoTextArea(elemid){
//½һtextareaû߶
if(!$("_textareacopy")){
var t = document.createElement("textarea");
t.id="_textareacopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareacopy").value= $(elemid).value;
$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
}
addHandler($("target"),"propertychange",change);//for IE
addHandler($("target"),"input",change);// for !IE
$(elemid).style.overflow="hidden";//һأġ
$(elemid).style.resize="none";//ȥtextareaקŴ/С߶/ȹ
}
addHandler(window,"load",function(){
autoTextArea("target");
});
</script>
<textarea id="target" rows="" cols=""></textarea>
</body>
</html>
分享到：
相关推荐
在Vue.js框架中，开发网页应用时，我们经常会遇到需要创建一个可以自动调整高度的textarea元素，以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...
根据文字的多少自动增高 能够自动伸缩 也可以 ←Backspace 减少字体的同时高度跟着减
这个插件会监听`Textarea`上的`input`和`change`事件，每当用户输入或删除文本时，都会自动调整`Textarea`的高度以适应新的内容。以下是基本的使用步骤： 1. 首先，在HTML中创建一个`Textarea`元素，确保设置好它的...
在许多场景下，我们希望textarea能根据用户输入的内容自动调整其高度，以提供更好的用户体验。"textarea 输入框自适应高度"这个主题就是关于如何实现这样一个功能的探讨。 在HTML中，textarea元素默认是不会自动...
在网页设计中，有时我们需要一个`Textarea`（文本域）能根据输入的内容自动调整高度，以保持良好的用户体验，避免用户滚动浏览过长的文本。这个功能可以通过JavaScript来实现，正如标题“Textarea根据内容自适应高度...
根据输入自动调整 textarea 高度 ##在线演示 ＃＃用法 // Enable: $ ( < textarea selector > ).autosize(); // Disable: $( < textarea selector > ).autosize(false); // Handle autosize ...
`react-textarea-autosize`的核心功能是监听textarea的输入事件，并根据文本内容的变化实时调整textarea的高度。这种自动调整高度的功能使得用户在填写长文本时，界面始终保持整洁，无需手动滚动或调整窗口大小。它...
在标题“flex3 textArea 高度自适应”中提到的问题，就是如何实现这样一个功能，让`TextArea`的大小随着其内容的增加而自动调整。 在描述中提到，已经有一个自定义的解决方案，可以依据文本内容自动调整`TextArea`...
在探讨“jQuery——TextArea高度自适应”的主题时，我们深入解析了如何利用jQuery库实现文本区域（TextArea）的高度自动调整，以确保其高度能够根据输入的文本量动态变化，从而提供更好的用户体验。以下是对该主题的...
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
为了解决这个问题，可以通过CSS来实现`textarea`根据内容的变化自动调整其宽度和高度的功能。 #### 1. 宽度固定，自动增高 为了让`textarea`的高度随着内容的增多而自动增长，可以使用以下CSS样式： ```css ...
这段代码会在用户在`textarea`中输入文字时，自动调整其高度为内容的实际高度，从而避免了固定高度导致的显示问题。 至于去除滚动条，可以使用CSS样式来实现。对于水平滚动条，我们可以通过设置`overflow-x: hidden...
`textareaAutoHeight.jquery.js` 是一个基于jQuery的插件，它的主要目标就是提供一种简洁的方法来自动调整textarea的高度。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务，使得...
为了解决这个问题，我们可以实现一个功能，使文本框能够根据输入内容自动调整其大小。这就是"文本框根据输入内容自动调整大小"这个主题所涉及的核心技术。 在HTML中，`<textarea>`元素用于创建多行文本输入框。它的...
在JavaScript或者CSS响应式设计中，你仍然可以根据需要调整 `textarea` 的宽高。 此外，为了提供更好的用户体验，当你禁用了 `resize` 功能时，可以考虑在设计上提供其他方式来显示或隐藏更多的文本。例如，可以...
因此，为了获得最佳效果，你应该避免在CSS中设置固定的宽度和高度，而是使用相对单位（如百分比或`em`），这样`textarea-autosize`可以根据容器的大小和内容自动调整。 在实际项目中，你可能还需要考虑其他因素，如...
有时候，我们希望`textarea`的宽度和高度能根据用户输入的内容自动调整，以提供更好的用户体验。本文将详细介绍如何通过JavaScript和CSS来实现`textarea`文本域的宽度和高度自适应。 首先，对于宽度的自动适应，...
在网页设计中，为了提供更好的用户体验，经常需要让文本框（textarea）的尺寸根据用户输入的内容自动调整。jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的功能和便捷的方法来简化DOM操作，包括实现文本框...
如果该字段可调整大小，则新大小将被视为最小高度 安装 npm install fit-textarea 设置 // This module is only offered as a ES Module import fitTextarea from 'fit-textarea' ; < textarea rows =" 3 " >...