无论如何通过CSS或Javascript根据内容设置textarea的高度?我的CSS中有一个硬编码的高度,但我想要它默认,所以页面加载时没有垂直滚动条?
我希望有一个文本区域,它总是和文本一样大.因此页面可以滚动,并且在文本区域中无法滚动.
这是我到目前为止所做的事情:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%;}
textarea {
border: none;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
line-height: 44px;
font-family:Helvetica;
font-size: 17pt;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-image:url('linedBack@2x.png');
outline: none;
resize: none;
}
textarea.vert { resize:vertical; }
</style></head><body>
<textarea id="InputTextArea" placeholder="placeholder"></textarea>
</body></html>
Run Code Online (Sandbox Code Playgroud) 在我的一个页面上,我有一个文本区域html标签供用户写入一个字母.我希望文本区域下面的内容向下移动,换句话说,我希望文本区域垂直调整,每行添加一行到文本区域并使下面的内容简单地相对于文本区域的底部定位.
我希望javascript/jquery有一种方法来检测单词的换行时间,或者添加新行并基于它来调整文本区域容器的大小.
我的目标是使文本区域下方的内容与文本底部保持相同的距离,无论用户写多少.
文本区域在文本溢出时创建滚动条.
我想要实现的是一个textarea,它以单行开头,但最多可增长到4行,此时如果用户继续输入则开始滚动.我有一个部分解决方案有点工作,它增长,然后当它达到最大值时停止,但如果你删除文本它不会像我想要的那样缩小.
这就是我到目前为止所拥有的.
export class foo extends React.Component {
constructor(props) {
super(props);
this.state = {
textareaHeight: 38
};
}
handleKeyUp(evt) {
// Max: 75px Min: 38px
let newHeight = Math.max(Math.min(evt.target.scrollHeight + 2, 75), 38);
if (newHeight !== this.state.textareaHeight) {
this.setState({
textareaHeight: newHeight
});
}
}
render() {
let textareaStyle = { height: this.state.textareaHeight };
return (
<div>
<textarea onKeyUp={this.handleKeyUp.bind(this)} style={textareaStyle}/>
</div>
);
}
}
Run Code Online (Sandbox Code Playgroud)
显然问题是scrollHeight当height设置为更大的时候不会缩减.有关如何修复此问题的任何建议,如果文本被删除,它也会缩减吗?
我正在努力寻找最好的textarea autogrow插件.我需要一个调整textarea的大小,即使我粘贴到它.任何的想法?
我想制作一本教科书,它以一个给定的宽度/高度开始.然后,如果用户输入的空间超过给定的空间量,则文本框会向下扩展.我该怎么做呢?我使用CSS吗?当用户传递允许的行数时,基本文本框只显示滚动条.如何使文本框再扩展5行呢?
<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>
Run Code Online (Sandbox Code Playgroud)
我如何使用Robert Harvey提到的例子?我之前从未使用过JavaScript
如何显示所有textarea行而不是具有垂直滚动.我已经尝试使用min-height和max-height和height:css但不起作用.
.form-control{
width:400px;
min-height: 100px;
max-height: 900px;
height: auto;}
Run Code Online (Sandbox Code Playgroud)
我真的不知道是否可以用css做到这一点.
也许可以使用本机javascript,所以我尝试这样的事情
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!")>
}
}
Run Code Online (Sandbox Code Playgroud)
我在这里找到了一些不错的东西,但它只增加和减少行,所以如何在不使用滚动的情况下显示所有textarea行.不需要固定高度的解决方案,需要动态或其他仅适用于Chrome浏览器的解决方案或仅适用于像Object.observe()这样的firefox.
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!") >
}
}Run Code Online (Sandbox Code Playgroud)
body {
padding: 20px;
}
.form-control {
width: 400px;
min-height: 100px;
max-height: 900px;
height: auto;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" …Run Code Online (Sandbox Code Playgroud)textarea我正在尝试在一个网页中选择所有内容。
有没有一种方法可以在一个查询中获取所有这些元素,并循环使用 Renderer2 为每个元素添加一个侦听器,以便 renderer.listen在我添加文本时实现垂直自动扩展textarea。
如果我使用 @viewchild,我必须为每个变量手动添加不同的模板引用变量。
是否有可能在角度中拥有类似于 getElementsByTagName 的东西并避免直接访问 DOM ?
这段代码在 Chrome 和 Firefox 中运行良好。但在 Safari 中,如果内边距超过 11 像素,则拖动手柄将不起作用。
这是 Safari 中的错误,还是我遗漏了一些愚蠢的东西?
<style>
textarea {
padding: 11px 16px;
}
</style>
<textarea>Stuff goes here. Does my drag handle work?</textarea>
Run Code Online (Sandbox Code Playgroud) 我有一个网络表单,我的客户希望用户能够打印出来。使用 CSS 进行一些样式设置时效果很好,但是,我有几个textaear字段。如果用户键入的内容超过 textarea 的高度,则打印时该类型将被截断。
我已经在打印样式表中尝试过textarea{height:100%;},textarea{height:auto;}但这些都不起作用。
有没有办法将 textarea 字段的大小调整为仅打印版本的文本大小?如果可能,我更喜欢 CSS 解决方案,我可以将其插入到我的打印样式表中。如果这是不可能的,javascript 解决方案将起作用。
截图对比:

注意:如果我不能只影响打印版本,我可以考虑使用 JS 在有人输入时自动调整 textarea 字段的大小。