css - 如何使用 CSS 强制 textarea 垂直调整大小?
问题描述
我有一个textarea
元素,我希望它有一个默认高度(例如 340 像素),但可以垂直调整大小到浏览器窗口高度的 70%(当我输入大量文本时,例如应对和粘贴这个问题应该使它垂直更大)。
我尝试resize: vertical
在 CSS 中设置参数并max-height
如下使用,但它仍然没有调整大小。
我做错了什么,我该如何解决?
#content {
position: relative;
top: 0px;
/*
max-width: 320px;
*/
margin: 0 0 0 0;
line-height: 1.6em;
z-index: 1;
height: 100%;
}
#statements {
position: absolute;
bottom: 0px;
left: 0px;
padding-bottom: 0px;
max-height: 70%;
background-color: rgba(255, 255, 255, 0);
max-width: 340px;
padding-left: 50px;
z-index: 10;
overflow: hidden;
/* pointer-events: none;*/
}
#entryform {
position: relative;
background-color: var(--entry-form-background);
width: 340px;
border-radius: 8px;
border-top-left-radius: 0px!important;
padding-top: 10px;
height: 100%;
padding-bottom: 20px;
padding-left: 10px;
margin-left: -10px;
margin-bottom: 0px;
z-index: 10!important;
display: block;
}
textarea {
font: 16px 'IstokWeb-Bold',sans-serif;
position: relative;
resize: vertical;
width: 92%;
max-height: 100%;
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
padding: 0.5em 0.6em;
display: block;
margin: 0.25em 0;
border: 1px solid #e6e6e6;
box-shadow: inset 0 1px 3px #e6e6e6;
border-radius: 6px;
-webkit-transition: 0.3s linear border;
-moz-transition: 0.3s linear border;
-ms-transition: 0.3s linear border;
-o-transition: 0.3s linear border;
transition: 0.3s linear border;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
z-index: 10;
}
<div id='statements'>
<div id="entryform" class="editorpane">
<div id="edit-panel">
<form action='/post' name='submitform' id="submitform" method='post'>
<textarea name='entry[body]' id="statement" placeholder='type in some words or #hashtags to see how they connect or copy and paste your notes or text here'></textarea>
<input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">
</form>
</div>
</div>
</div>
解决方案
您可以使用带有事件侦听器的 javascriptkeyup
和/或change
这样当您粘贴文本时,它会将 textarea 高度调整为element.scrollHeight
.
let textarea = document.getElementById('textArea');
textarea.addEventListener('change', resizetextArea);
textarea.addEventListener('keyup', resizetextArea);
function resizetextArea(){
textarea.style.height = `${textarea.scrollHeight}px`;
}
#content {
position: relative;
top: 0px;
/*
max-width: 320px;
*/
margin: 0 0 0 0;
line-height: 1.6em;
z-index: 1;
height: 100%;
}
#statements {
position: absolute;
bottom: 0px;
left: 0px;
padding-bottom: 0px;
max-height: 70%;
background-color: rgba(255, 255, 255, 0);
max-width: 340px;
padding-left: 50px;
z-index: 10;
overflow: hidden;
/* pointer-events: none;*/
}
#entryform {
position: relative;
background-color: var(--entry-form-background);
width: 340px;
border-radius: 8px;
border-top-left-radius: 0px!important;
padding-top: 10px;
height: 100%;
padding-bottom: 20px;
padding-left: 10px;
margin-left: -10px;
margin-bottom: 0px;
z-index: 10!important;
display: block;
}
textarea {
font: 16px 'IstokWeb-Bold', sans-serif;
position: relative;
resize: vertical;
width: 92%;
max-height: 100%;
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
padding: 0.5em 0.6em;
display: block;
margin: 0.25em 0;
border: 1px solid #e6e6e6;
box-shadow: inset 0 1px 3px #e6e6e6;
border-radius: 6px;
-webkit-transition: 0.3s linear border;
-moz-transition: 0.3s linear border;
-ms-transition: 0.3s linear border;
-o-transition: 0.3s linear border;
transition: 0.3s linear border;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
z-index: 10;
}
<p>
<b>Copy and paste this text:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div id='statements'>
<div id="entryform" class="editorpane">
<div id="edit-panel">
<form action='/post' name='submitform' id="submitform" method='post'>
<textarea id="textArea" name='entry[body]' id="statement" style="overflow:hidden" placeholder=''></textarea>
<input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">
</form>
</div>
</div>
</div>
推荐阅读
- r - 如何将具有开始和结束时间列的行转换为 R 中的时间序列格式?
- julia - Julia 中的线程性能
- swift - 如何在 macOS 上使 SwiftUI 的 Picker 无边框/透明?
- python - ValueError: int() 以 10 为基数的无效文字:'81?36N'
- amazon-web-services - 如何显示托管在 S3 中的静态网站的先前版本
- r - 如何对数据框的每一行应用函数?
- python - 如何仅操作字符串中单词的中心值(不是第一个和最后一个)?
- python - 在 minimum_squares 中调用函数作为参数返回“TypeError:'numpy.ndarray'对象不可调用”
- python - 如何使用 Pandas 和 Python 创建新变量并将其添加到数据框以打印到 excel?
- python - python/tkinter 弹出窗口在 windows 或 linux 上显示正常,但在 OSX Mojave 上不显示。没有错误