带滚动的HTML文本区域，但阻止编辑？
带滚动的HTML文本区域，但阻止编辑，可以使用textarea元素结合CSS样式来实现。下面是一个完善且全面的答案：
带滚动的HTML文本区域，但阻止编辑，可以使用textarea元素结合CSS样式来实现。textarea元素是HTML中用于创建文本输入区域的标签，通过设置其属性和样式，可以实现滚动和禁止编辑的效果。
首先，创建一个textarea元素，并设置其readonly属性为true，这将禁止用户对文本区域进行编辑。然后，通过CSS样式设置textarea的高度、宽度和滚动条样式，以实现带滚动的效果。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.textarea-container {
width: 300px;
height: 200px;
overflow: auto;
}
.textarea-container textarea {
width: 100%;
height: 100%;
resize: none;
}
</style>
</head>
<body>
<div class="textarea-container">
<textarea readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna ac aliquam tincidunt, nunc nunc venenatis nunc, vitae tincidunt enim libero vitae lectus. Sed lacinia, risus id aliquet aliquam, nisl justo efficitur odio, id ultrices nunc elit a nisl. Sed vitae mi auctor, lacinia enim id, scelerisque nunc. Praesent auctor, nunc a tristique consectetur, nunc nunc facilisis nunc, vitae rutrum lectus nisl ac nunc. Nullam id lacus sed nisl lacinia lacinia. Nulla facilisi. Sed ut enim id mauris tincidunt lacinia. Sed euismod, urna ac aliquam tincidunt, nunc nunc venenatis nunc, vitae tincidunt enim libero vitae lectus. Sed lacinia, risus id aliquet aliquam, nisl justo efficitur odio, id ultrices nunc elit a nisl. Sed vitae mi auctor, lacinia enim id, scelerisque nunc. Praesent auctor, nunc a tristique consectetur, nunc nunc facilisis nunc, vitae rutrum lectus nisl ac nunc. Nullam id lacus sed nisl lacinia lacinia. Nulla facilisi. Sed ut enim id mauris tincidunt lacinia.</textarea>
</div>
</body>
</html>在上述代码中，我们创建了一个class为"textarea-container"的div容器，用于包裹textarea元素。通过设置div容器的宽度和高度，并将overflow属性设置为auto，可以实现在文本内容超出容器大小时出现滚动条。
textarea元素的宽度和高度设置为100%，使其填充整个div容器。通过将resize属性设置为none，可以禁止用户调整文本区域的大小。
这样，就实现了一个带滚动的HTML文本区域，同时禁止用户编辑文本内容。
推荐的腾讯云相关产品：腾讯云CVM（云服务器），腾讯云CFS（文件存储），腾讯云COS（对象存储）。这些产品可以用于存储和托管HTML文件，并提供高可用性和可扩展性。
腾讯云CVM产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云CFS产品介绍链接地址：https://cloud.tencent.com/product/cfs 腾讯云COS产品介绍链接地址：https://cloud.tencent.com/product/cos
相关·内容
1回答
我有带换行符的文本格式。垂直方向无法容纳更多的文本，所以它会滚动。很好。 const securityMessage = 'Here's my text.'; 我需要在页面上的滚动区域中显示文本，但有一个模式与超文本标记语言textarea，我的用户可以编辑文本。 首先，我尝试使用textarea，它可以很好地工作，
浏览 19提问于2020-07-11得票数 0
回答已采纳
我在谈到TextArea时看到的大多数问题都是关于限制字符的问题。我不想这样。我想知道如何将TextArea html元素的可编辑区域限制在实际的textarea本身。这有可能吗？您可以将该区域的文本限制为120个字符，但这不会阻止用户按返回5次，并且已经超过了我为其设置的给定区域。我不想有滚动条出现。
有任何javascrip
浏览 2提问于2014-10-17得票数 1
回答已采纳
当用户单击滚动条下的箭头时，我可以更改NSScrollView的滚动量，但当用户使用键盘时，如何更改文档的滚动量？(即，用户正在使用键盘向下箭头逐行移动文本，或者正在编辑靠近可见矩形底部的区域)。我试图阻止它滚动大约50%的可见矩形，并使其滚动到单行的高度。找不到设置此行为的方法。
干杯!
浏览 1提问于2010-12-08得票数 0
我在公司的存储库中看到了一个viz，我希望复制其中的一个功能。viz由几个页面组成，其中包含一个介绍性页面。介绍性页面使用可滚动画布包含大量信息，而其他详细信息页面采用固定到窗口的方式显示数据，在一个屏幕中显示每个部分，而不显示整个滚动条。我想知道的是如何使dxp文件中的一个或部分页面能够启用滚动条(较大的画布高度)，而其余的页面具有适合屏幕的方式显示viz。任何方法都将受到赞赏。PS: Docum
浏览 1提问于2018-11-05得票数 1
point of time it breaks into newline in IE but it overflows text area in Chrome
</textarea> 当在IE/EDGE的文本区内输入多个空格时但在Chrome/Firefox中，文本区域内的多个空格会溢出文本区域，而不是插入换行符。我也尝试过使用空格:pre，但它会创建水平滚动条，我不想在文本区域<
浏览 10提问于2019-06-03得票数 1
在java swing中有没有一种方法来编写代码：
“将JTextArea的宽度限制为W，但允许JTextArea垂直扩展以包含所有换行文本‘？
浏览 0提问于2012-03-13得票数 0
回答已采纳
2回答
我试图设计一个文本区域，它根据内容调整自身大小。我就是这么写的-
<textarea data-autoresize='true'></textarea>JavaScriptdata-autoresize');textarea { width: 150px;
height: 150p
浏览 8提问于2016-12-22得票数 0
回答已采纳
我在网页中有一个文本区域，最初没有滚动条。但当我超过字符1000时，滚动条将显示在文本区域中。
当我单击或编辑相同的文本区域时，我必须验证文本区域中是否存在滚动条。
浏览 5提问于2016-11-17得票数 1
回答已采纳
1回答
如何创建一个可滚动、高度固定并允许标记文本的文本区域？HTML、JSF和PF4.0元素是可能的，必须尊重原始文本的换行。如果我使用<p:inputTextarea>并将disabled=设置为“true”，当我标记文本时，就好像不能释放光标一样。无论我的光标走到哪里，它都会继续标记。此外，禁用似乎阻止我使用滚动条。它应该看起来类似于此，但是使用激活<e
浏览 2提问于2014-03-06得票数 1
回答已采纳
我想使用浏览器中<textarea>标签提供的特性和功能。我只想用它来保存一大块信息，这些信息可以通过使用<textarea>标记附带的滚动条来查看。所以我的问题是我可以在不使用<form></form>标签的情况下使用它吗？谢谢。
浏览 8提问于2013-01-26得票数 9
回答已采纳
1回答
我为它创建了一个布局，它有一个滚动视图作为根视图&相对布局作为它的子级，所有其他布局都在这个相对布局中。但是当编辑文本在屏幕的底部，用户点击它进入键盘时，它会在编辑文本和键盘之间显示一些空白框&之后，如果用户输入任何单词，它就不会显示在编辑文本中。但是，如果编辑文本超过屏幕的一半大小，它就可以正常工作。
浏览 0提问于2012-04-10得票数 11
回答已采纳
3回答
我有一个实时的HTML编辑器，在左边有一个用于代码输入的文本区，在右边有一个“预览”DIV来包含输入代码的预览。目前，在左窗格中编辑代码时，预览只是停留在它所在的位置，所以通常您正在编辑的代码部分不在预览的可见区域中(特别是当涉及图像时)。
我的问题是，如何让预览滚动显示当前正在编辑的代码部分？这是我到目前为止
浏览 1提问于2010-04-02得票数 1
我添加了一些简单的jquery到我正在工作的一个网站，当用户滚动到屏幕上的某个点时，使两个元素滑入视图。动画做了我想做的，但当我向下滚动到该区域时，就在动画结束之前，它会立即将我推到页面的顶部。当我向下滚动时，动画是完整的，但它留下了一个看起来像是在它所移动的区域中移动的文本的“副本”。如何才能阻止页面跳转到顶
浏览 0提问于2013-03-08得票数 0
1回答
我使用的是，所以当用户输入文本时，我的文本区域就会增长。它的工作原理很好，但是当你找到文本区域的底部时，它会在展开前向上滚动，从而产生难看的跳跃效果。这在作者的演示中也是可见的(点击上面页面上的"Interactive“，因为Stack溢出不会让我在这里不带代码地发布jsfiddle.net )。
是否有办法完全抑制垂直滚动</
浏览 2提问于2015-04-05得票数 2
回答已采纳
1回答
我刚开始使用TinyMCE，但对它的尖括号行为感到沮丧。我简化了我的代码，如下所示：<html lang="en"> <meta charset="utf-8"><!>
然而，TinyMCE似乎已经丢弃了t
浏览 0提问于2015-07-07得票数 0
回答已采纳
1回答
我有一个小的MCE编辑器的问题。在IE中，当我从任何地方将一些HTML内容复制粘贴到微型Mce编辑器中，并且当我选择粘贴内容的部分时，我会得到一个带框的边框。！！这真的很烦人&当我滚动编辑器的时候-它离开了编辑器区域。我想删除/避免此边框。
浏览 3提问于2011-04-12得票数 1
1回答
在Qt中，可以在文本区进行“平滑滚动”吗？我的意思是，有一个名为“代码编辑器”的Qt演示，它使用QPlainTextEdit作为可编辑的文本区。当我滚动区域时，它总是一次跳过一整行，也就是说，最上面的一行总是完整地显示出来。例如，在HTML中，文本区域可以“平滑”地滚动其内容，也就是说，即使只滚动一个像素，也可以滚动</
浏览 2提问于2013-02-06得票数 2
回答已采纳
2回答
使用Safari，您可以通过在iframe上设置style="overflow: hidden;“来禁用大多数iframe滚动。但是，如果您在iframe中单击并移动鼠标，内容无论如何都会滚动。示例： <body>
<iframe style="width: 100%; height:100px; overflow: hidden;" scrolling="no" src="scrollcontent.html</em
浏览 0提问于2010-03-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
