使用"contenteditable“属性更改文本框的大小
使用"contenteditable"属性可以将一个元素设置为可编辑的文本框，用户可以直接在页面上进行编辑。通过设置该属性为"true"，可以实现文本框的大小更改。
"contenteditable"属性是HTML5中的一个属性，它可以应用于任何HTML元素，包括div、p、span等。当设置为"true"时，元素的内容将变为可编辑状态，用户可以直接在页面上进行修改。
优势：
- 简单易用：通过设置"contenteditable"属性，无需使用额外的JavaScript代码即可实现文本框的编辑功能。
- 实时编辑：用户可以直接在页面上进行编辑，实时查看修改结果，无需刷新页面。
- 灵活性："contenteditable"属性可以应用于任何HTML元素，使得开发者可以根据需求选择合适的元素作为可编辑区域。
应用场景：
- 富文本编辑器："contenteditable"属性可以用于实现富文本编辑器，用户可以在页面上进行格式化文本的编辑，如字体、颜色、样式等。
- 内容管理系统：可将页面中的某些区域设置为可编辑状态，方便管理员对内容进行修改和更新。
- 在线协作工具：多个用户可以同时编辑同一个文档，实时查看对方的修改，提高协作效率。
推荐的腾讯云相关产品： 腾讯云提供了丰富的云计算产品和服务，以下是一些与文本编辑相关的产品：
- 腾讯云富文本编辑器（产品介绍链接：https://cloud.tencent.com/product/rte）：腾讯云提供的富文本编辑器，可用于快速集成富文本编辑功能到网站或应用中。
- 腾讯云云服务器（产品介绍链接：https://cloud.tencent.com/product/cvm）：腾讯云提供的云服务器，可用于搭建网站或应用的后端环境，支持自定义配置和管理。
请注意，以上推荐的产品仅为示例，实际选择产品时应根据具体需求进行评估和选择。
相关·内容
2回答
让我们使用下面的代码
<span contentEditable="true">asdfasdf </span>
span
{
height:20px;
width:100px;
border: 1px solid black;
}
如何模拟文本框行为？也就是说，当文本大于跨度宽度时，它不会调整大小。
浏览 0提问于2011-10-27得票数 0
回答已采纳
我有下面的HTML。
基本上，它是一个包含文本的可内容可调整的div。
在div中还有另外两个用户可以单击的div。
<div class="test" contenteditable="true">Text
<div class="color-picker">
<img src="/style/icons/color_swatch.png" alt="Color picker" title="Pick a color">
</div>
浏览 3提问于2010-12-09得票数 1
回答已采纳
4回答
html
<div contentEditable="true">testing....</div>
jQuery
$(document).ready(function(){
$('[contenteditable]').removeAttr('contenteditable');
});
上面的代码很好，而且工作正常。你可以感觉到它。
现在，试试这个
$('[contentEditable]').removeAttr('contentEditable');
// notice th
浏览 6提问于2010-07-07得票数 7
回答已采纳
我需要使一个与日历控件相关的文本框为只读。我将contentEditable属性设置为false。不过，它仍然可以编辑。这里，Readonly属性无法支持我的解决方案。有谁能帮帮我吗？
‘contentEditable="False“MaxLength="10”/>
提前感谢
浏览 1提问于2011-05-03得票数 1
2回答
我希望文本框中的光标/线条在页面加载时自动开始闪烁。我试过了
contentEditable="true"
但这是行不通的
浏览 2提问于2013-12-25得票数 1
回答已采纳
3回答
如何由前端的用户调整div中的文本大小。
对于用户在前面调整大小的div，我们可以使用css如下
div {
resize: both;
overflow: auto;
}
或者使用jquery
$( "#div-id" ).resizable();
要编辑前面div中的文本，我们可以使用
<div id="div-id" contenteditable="true"> Type text</div>
但是如何使可调整大小的文本在div内。
示例：
用户可以更改这个div <div id="
浏览 6提问于2016-10-18得票数 0
回答已采纳
我有一个围绕<div ... contenteditable="true">构建的富文本编辑器的问题。我试过用各种方法禁用自动填充功能-- data-lpignore="true"、autocomplete="off"，但不管我怎么尝试，当我聚焦到文本框中时，就会在Android上弹出LastPass的自动填充对话框，这使得它的使用极其困难。我甚至不能忽略它而不在下一次重新聚焦编辑器时弹出。 如何让LastPass和其他我不使用的移动密码管理器忽略这个带有contenteditable属性的div？ ?
浏览 45提问于2021-05-07得票数 0
1回答
如果我们想在文本框或可内容的div上捕获一个键事件，我们只需使用"addEventListener“方法和"keypress”、"keyup“事件。但是..。
如果我想在没有"contenteditable“属性的简单div元素上捕获"keyup”事件？我该怎么做？
浏览 3提问于2015-11-14得票数 0
回答已采纳
在经典的asp.below中如何调用获取jscript中的文本框值是我的代码
<form>
<input type="text" id="abd" name="abc" value="">
</form>
<script type="text/javascript" >
function abc()
{
var contenteditable = document.querySelector('[contenteditable]'),
text =
浏览 25提问于2016-08-18得票数 1
2回答
我动态地创建一个无序列表，并在单击按钮时将项目添加到其中。我将其附加到一个具有contenteditable属性设置为true的部分。不过，我认为这是行不通的。即使对于列表，我也将contenteditable属性设置为true，但我猜它应该从它所附加的部分继承该属性。这是我正在做的事情的代码。
// create text input
var categoryInput = document.createElement('input')
// create button to add the text entered to a list
var btnAddToList =
浏览 4提问于2013-10-23得票数 1
回答已采纳
如果不允许值，htmlpurifier将删除属性。例如；
<div contenteditable="true"></div>
我为contenteditable属性设置了div标记的权限，因此该值只能是false。但是，如果contenteditable="true"或false以外的任何东西，htmlpurifier将完全删除该属性。我不喜欢这种行为。我希望htmlpurifier始终保留contenteditable属性，并将其设置为false。
这有可能吗？
实参
$config = \HTMLPurifier_Config::c
浏览 0提问于2018-10-28得票数 2
回答已采纳
所以基本上我有：
<div id="hey" contenteditable="true"></div>
它用作文本框。现在的问题是，当您尝试输入以下内容时：
Hello
How are you
(注意:它包含了“你好”之后的“行尾”)。但是我得到的输出是HelloHow are you，但我希望它和
Hello
How are you
小提琴测试：
您只需在文本框中键入两行，然后按submit按钮，然后自己查看结果。
多问候
浏览 0提问于2017-04-02得票数 2
回答已采纳
12回答
例如，我有以下布局：
<div contenteditable="true">
<span class="text-block" contenteditable="false">
<span contenteditable="false">Name</span>
<a href="javascript:void(0)">
<i class="small-icon-remove">
浏览 10提问于2014-02-18得票数 32
回答已采纳
我使用JavaScript将一些值绑定到TextBox。但在PostBack期间，textbox值将被清除。所以我在TextBox property.So中使用了contentEditable="false“来解决上面的问题。
但是，假设没有使用Javascript绑定文本框的记录，此时我想将TextBox属性contentEditable=设置为“true”。所以我们可以输入一些值。如何在代码隐藏文件中做到这一点？
这是我的TextBox源代码：
这是我为TextBox赋值的JavaScript：
function SuggessionSelectedValues(obj, ct
浏览 1提问于2011-06-23得票数 0
回答已采纳
2回答
我想为我的网站做一个简单的编辑。
<div contenteditable="true">edfedasd</div>
它的工作，但我想禁用大小调整图像在这个div。
<div contenteditable="true">edfed<img src="/sm/1.gif">asd</div>
我测试onmousedown，onmouseup，onselect，onfocus事件，但我不能这样做！
请帮帮我!
浏览 2提问于2015-01-31得票数 0
回答已采纳
3回答
当我按enter或blur()时，我需要释放textfield
事实上，当我模糊的时候我很好，但我需要这两样东西。
这就是我所拥有的：
* JQuery *
$(document).ready(theMain);
function theMain(){
$("td").blur(ActTable);
function ActTable(){
alert("it works!");
}
}
* HTML *
<table>
<tr><td
浏览 9提问于2015-11-20得票数 0
回答已采纳
代码如下：
<div contenteditable=true style="position:absolute;">dddw</div>
这段代码可以在firefox上拖动，但不能在chrome上拖动。
那么如何让它在chrome上可拖动呢？
谢谢
浏览 3提问于2010-11-27得票数 0
尝试以编程方式在box浏览器中填充此文本框。
<div class="yt-simplebox-text" contenteditable="plaintext-only">This is a text inside of the textbox</div>
我试过了，但根本不起作用。
For Each element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("div")
If element.GetAttribute("
浏览 3提问于2016-01-20得票数 1
javascript:if(document.body.contentEditable == false){document.body.contentEditable = true;}else{document.body.contentEditable = false;} void 0;
看起来它所做的一切都是假的。
浏览 9提问于2022-03-28得票数 -1
回答已采纳
HTML属性是否需要=true才能工作？为什么没有它，即使它不是布尔属性，它也能工作？
对此答案的注释指出，"Contenteditable不是布尔属性“：
例如，如果我有以下代码：
<p contenteditable placeholder="Website">www.example.com</p>
这似乎非常好，而且标记是可编辑的，即使我没有指定=true。
我注意到的另一件事是，如果我不指定=true，那么用CSS定位它只适用于：
[contenteditable]而非[contenteditable="true"]
浏览 2提问于2021-02-10得票数 1
回答已采纳
我正在创建一个页面，其中嵌入了一个codemirror实例，并在页面上有一个可内容编辑的部分。我的目的是在codemirror编辑器中显示contentEditable部分的html代码，并且每当用户在可编辑部分内单击时，codemirror值都会更新。我面临的问题是，只要用户在contentEditable部分内单击，更新编辑器值的代码就是run editor.setValue(..content value from editable..)，这会使contentEditable变得松散，从而无法向contentEditable添加数据。
我到底该如何防止这种情况呢？这样用户就可以直接在co
浏览 0提问于2013-02-15得票数 0
回答已采纳
我在使用选择器指定HTML输入时遇到了问题。
我希望剧作家识别一个WhatsApp 文本框，这样我就可以使用它了，但是没有ID，甚至没有我可以指定的CSS元素。
首先，我尝试使用上的详细命令，从网站中获取元素。
<div title="Search text box" role="textbox" class="_13NKt copyable-text selectable-text" contenteditable="true" data-tab="3" dir="ltr"></
浏览 7提问于2022-04-14得票数 2
回答已采纳
我试图在输入框中插入文本，输入框位于contenteditable div中。当我单击“输入”框时，光标不会出现。双击输入框后，我可以插入文本。这个问题发生在IE中。
<div contenteditable="true">
<input type="text">
</div>
谢谢。
浏览 3提问于2015-04-25得票数 3
回答已采纳
我一直在使用jquery()插件来调整内容可编辑div中表的大小。
我希望能够从表行中调整行高的大小，但是标准设置将南方处理程序方式放置在表的底部，实际上远远低于表的实际大小。
我一直在玩CSS，试图让每个行处理程序设置在行的边框上，但是无法精确地设置，只是无法在行增长时停留在边框上。
这是密码，如果有人能帮忙的话。
$(document).ready(function(){
$('tr').resizable({
handles: "s"
});
});
table {
width: 100px;
height: 100px;
}
浏览 5提问于2017-10-10得票数 0
回答已采纳
有没有办法从中删除火狐添加的属性'_moz_resizing="true"‘，以避免用户在设计模式下(当为contentEditable=true时)调整表格大小。
浏览 0提问于2010-04-03得票数 2
回答已采纳
我有一个contentEditable div：
<div id="editor" contentEditable="true"> Enter your text here.. </div>
和一个dropdown button：
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown" title="Taille de police">
浏览 4提问于2014-03-01得票数 3
回答已采纳
3回答
在这种情况下，我需要计算来自TD id=的值的和，它将被重复/重复几次。Ajax只从第1 TD获取值，而rest则被忽略。
// ajax part
function CalculateMonthlySalary() {
var tot = 0;
$("#amount").each(function() {
tot += parseInt($(this).text());
$("#divEstimatedMonthlySalary").html(addCommas(tot.toFixed(0)))
});
}
<tr data
浏览 3提问于2017-03-11得票数 1
回答已采纳
3回答
嗨，当我在Windows上的Visual上创建一个文本框时，我可以获得超过20个像素的宽度，但是我不能获得高度超过20个像素。
那么，我怎样才能调整高度呢？
浏览 6提问于2012-05-14得票数 1
回答已采纳
我有一个contentEditable div，它允许用户键入文本，以及插入输入元素，比如文本框和下拉列表。通过允许用户单击可编辑div之外的按钮，元素将被插入到光标当前所在的位置。
我让它运行得很好，下面是一个一般的例子：
它基本上是做一个
document.selection.createRange().pasteHTML(html);
问题是，它希望HTML被传递到函数中，该函数在游标处插入元素。对于更复杂的事情，我希望能够插入带有完整html/js逻辑的Ember组件，而不是尝试将所有html/js放入一个字符串中。
是否有方法以编程方式创建组件并在游标处将其插入到contentEd
浏览 2提问于2016-06-08得票数 1
回答已采纳
6回答
对于我的单行文本框，我设置的是边框=无。在这样做的时候，高度变得非常小。我无法以编程方式设置文本框的高度。如果我设置了边界，那也没问题，但我不想要任何边界。甚至文本也不是完全可见的，所以字体大小已经大于文本框的高度。
我尝试创建一个自定义文本框，并设置它的高度，但没有效果。如何处理这种情况？任何帮助都是非常感谢的。
浏览 3提问于2011-07-16得票数 4
回答已采纳
我尝试过很多类似的事情
"var htmlTableValue = "<HTML>
<table>
<tr><TD> 12 <TD></tr>
</table>
</HTML>";
var request = $.ajax({
url: '',//action method url which defined in controller
type: 'POST',
浏览 1提问于2015-03-10得票数 1
1回答
使用按钮调用编辑元素文本，将内容可编辑元素切换为true，并在完成编辑时将内容可编辑元素切换为false！
如何在类中将内容设置为false！
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
template: `
<h2 #el contenteditable="false" (blur)="text=el.textContent">
This Content is Editable
浏览 3提问于2017-04-29得票数 13
回答已采纳
如何(使用jquery或javascript)让<div contenteditable></div>在我输入更多文本时自动增长？
浏览 0提问于2013-04-07得票数 8
1回答
当contenteditable元素为空时，如何使contenteditable光标出现在焦点上？请参阅下面的代码和
HTML
<p>type here:
<span id="contentEditable-name"></span>
</p>
JS：
var contenteditable_el = document.getElementById('contentEditable-name');
contenteditable_el.contentEditable='true';
浏览 2提问于2016-02-02得票数 1
3回答
我正在尝试将内容可编辑div中特定元素的光标更改为“指针”。
在Internet Explorer 8和9中，以下html代码无法按预期工作。
你知道如何在可编辑的div中为元素设置光标样式吗？
<div contenteditable="true">
<img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" style="cursor:pointer"/>
</div>
浏览 2提问于2012-01-12得票数 5
回答已采纳
在Winforms的C# .Net中，我发现几乎所有组件中都有两个事件，Resize()和SizeChanged()。它们之间有什么不同吗？如果两个事件相同，那么为什么C#要提供两个不同的事件呢？
我正在C#中创建一个用户控件。此控件包含一个文本框。当用户更改控件的大小时，我想调整文本框的大小。我对我应该使用哪个事件感到困惑，为什么？
浏览 2提问于2011-09-16得票数 36
回答已采纳
2回答
我正在尝试创建一个如下所示的用户体验：
基本上，这里有一个不可编辑文本的<span>，后面跟着一个textarea/input和一些其他不可编辑的<span>s。一个简单的文本区域/输入在间隙很短的时候没有问题，但是当它很长的时候，布局会变得很尴尬。我研究过contentEditable，但我不确定它是否是我所需要的(我还读过一些，表明它是邪恶的)。
我还有别的选择吗？
浏览 0提问于2017-04-16得票数 0
回答已采纳
我有一个html元素来输入contenteditable=true输入文本。此字段为必填字段。我可以对这个元素使用asp-for属性吗？
<div asp-for="Comment" contenteditable="true"></div>
<span asp-validation-for="Comment" class="text-danger"></span>
感谢您的评论
浏览 2提问于2017-11-06得票数 0
1回答
WPF与列表框的结合观察
、、、
我有个小问题，我不知道怎么解决。我有一个名为Point的类，它有一个可观察到的System.Windows点集合。看起来是这样的：
public class Points
{
public Points()
{
MyPoints = new ObservableCollection<Point>();
InitWithValues();
}
public ObservableCollection<Point> MyPoints { get; set; }
private void InitWit
浏览 2提问于2014-08-07得票数 0
回答已采纳
1回答
我有一个带有许多文本框的滚动视图的视图控制器，当我单击其中一个文本框时，键盘出现，滚动视图的内容大小不足以在键盘打开的情况下显示所有内容。如何在每次弹出键盘时更改内容大小，并在键盘消失后将其重新设置？另外，有没有一种方法可以让它消失，而不需要在每个文本字段上使用Also？
希望有人能帮助我，我对Objective C还很陌生。
浏览 0提问于2012-06-19得票数 0
回答已采纳
我已经将一个文本框初始化为字体大小为16。现在我注意到，当我在文本框边界之外键入时，iPhone会减小字体大小，然后滚动。现在，如果我删除文本框中的所有内容并开始键入，它从小字体开始，永远不会变成16。你能告诉我如何解决这个问题吗？每次有人开始打字时，我可以用某种方法初始化字体大小吗？
谢谢。
浏览 0提问于2009-06-04得票数 5
回答已采纳
在我正在处理的WinForm中，我在文本框之间有两个TextBox小部件和一个按钮。当表单启动，而winform最小大小时，TextBoxes看上去就像预期的那样。在靠近中间按钮的项目之间没有空隙。如上图所示。
但是，当用户最大限度地使用winform时，TextBoxes移动到正确的位置，但不要展开以保持靠近中心的按钮。Textbox A锚定在左侧，Textbox B锚定在右侧。所以对齐是正确的。这是从底部的图形中看到的。
现在的问题是，如何使文本框A向右增长，使其靠近中间的按钮，而文本框B则增长到左侧，使其也接近按钮？
谢谢!埃里克
浏览 2提问于2015-08-19得票数 1
回答已采纳
.comment-box2 {
display: block;
width: 100%;
overflow: hidden;
outline: none;
min-height: 40px;
line-height: 20px;
padding-left: 8px;
background-color:#F5FFFA;
border-radius:15px;
border: 1px solid #708090;
display:inline-block;
width:330px;
}
&l
浏览 2提问于2021-03-11得票数 1
回答已采纳
1回答
我正在为web浏览器开发富文本编辑器，我想在RTE/ContentEditable元素中处理当前字体、颜色和大小的值。是否有一些预先选择的函数来获取这些值，比如直接与ContentEditable元素连接的execCommand？或者我应该使用一些文本范围的jQuery库来获得这些属性？
浏览 0提问于2012-01-07得票数 16
回答已采纳
1回答
我已经创建了一个带有指定模板的指令。我希望看到我在文本框下面的debug div中输入的内容。但是debug只显示初始值并没有更新。我想我可能犯了一些愚蠢的错误。但我想不出来。
以下是指令：
angular.module('directiveBinding', [])
.directive('mydirective', function() {
var my_template = '<div contenteditable="true" ng-model="myobj.text"' +
浏览 1提问于2015-08-04得票数 0
2回答
我有一个html表，它可以使用jquery进行排序。然后，我添加了一个桌子，作为垃圾桶。出于美观的原因，我只希望在用户拖动表行时看到垃圾桶。为此，我在活动事件上创建表行，并删除表行--停用事件。但是，我注意到，当项目被拖到垃圾桶中时，它不再会删除该项目。我试图通过使用settimeout来修复这个问题，这样在表不正确之前就会有一个延迟，但是这是行不通的。
我还想知道我可以修复它，以及如何使它下降而不是立即弹出()，并移动回而不是消失(相反的例子)。
我有一个，这里也是表的html：
<table class="table" id="tableDevices"
浏览 6提问于2015-07-29得票数 3
回答已采纳
1回答
如何才能强制内容可编辑的div像文本框一样工作？也就是说，它具有固定的水平宽度，但在垂直方向上无限扩展？这是一个jsfiddle，下面是这个小提琴中的代码的副本：
<!--How do I force the text to stay in the div horizontally and scroll infinitely vertically?-->
<title>JS Bin</title>
<style>
.element {
max-height: 200px;
width:300px;
height:30
浏览 2提问于2014-10-20得票数 3
2回答
我使用lightswitch的脚本将一个超文本标记语言表格编码成JSON string ()。问题是，当我警告结果字符串(使用JSON.stringify(data))时，JSON记录从第13列开始，然后一直到末尾，然后从第1列继续到第12列。我不明白为什么，这个脚本似乎可以在每个表上正常工作，但在我的表上却不是这样：
<div contenteditable>
<table id="input">
<tr id="start">
<th contenteditable="false">00&
浏览 2提问于2016-05-10得票数 4
1回答
我面临的问题是，当我向文本框中添加一些数据并单击"create“时，第三列中呈现的按钮将丢失它们的jquery。以下是小提琴链接：
这是我的html：
<div id="protocolParMain">
<table class="userTable">
<tr>
<th class="uName">Username</th>
<th class="uLevel">Level</th>
<th class=&
浏览 2提问于2015-09-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
