使用javascript/css替代文本区域

textarea alternative using javascript/css

本文关键字：文本 区域 css javascript 使用      更新时间：2023-09-26

我喜欢通过将鼠标放在右下角的斜线上并拖动鼠标来调整文本区域的大小。我想添加css样式的文本，这不能实现与文本区域。有人知道用另一个DOM元素模拟文本区域大小调整的方法吗?这样，我就可以将我的CSS样式添加到文本和我放置在里面的任何东西上。

我想你会发现你可以像对任何其他元素一样对文本区域应用css。css中只有两个元素很有趣，那就是file uploader和select。

例如，请参阅http://codepen.io/cshaw/pen/YyVxRE查看一个使用基本css样式的文本区域示例。

<style>
textarea {
border: 1px solid black;
background: green;
color: white;
padding: 10px;
width: 500px;
height: 300px;
}
</style>
<textarea name="youtextarea">
  SOME CONTENT
</textarea>

或者，如果必须设置一个可调整大小的div，请参见http://codepen.io/cshaw/pen/zvwdbB

<style>
div {
resize: both;
border: 1px solid #222;
width: 500px;
height: 200px;
overflow: auto;
background: #222;
color: #999; 
padding: 10px;
}
</style>
<div>Resizable Div</div>

您是否尝试了cssresize属性??

div {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>Let the user resize both the height and the width of this div element.</div>
</body>
</html>

相关文章：