我正在尝试使文本区域内容可编辑,但失败了。我正在使用此代码:
<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea>
我期待像 http://html5demos.com/contenteditable
这样的结果有人知道为什么它不起作用吗?
编辑:
我这样做是因为我试图做一个 oneliner 以将控件添加到表单中,在该表单中可以粘贴 (HTML) 格式的内容并保留其格式。我试图做到这一点,无需大惊小怪,无需 JavaScript 代码。看来这是不可能的。如果没有添加相反的进一步输入,我将在一天内关闭这个问题。
您是否在页面顶部设置了正确的文档类型?对于 HTML5,您需要以下文档类型:
<!DOCTYPE html>
另外,为什么是文本区域?文本区域已经可以编辑。
他们没有使用文本区域,文本区域已经是可编辑的。这就是他们正在使用的
<section contenteditable="true" id="editable">
<h2>Go ahead, edit away!</h2>
<p>Here's a typical paragraph element</p>
<ol>
<li>and now a list</li>
<li>with only</li>
<li>three items</li>
</ol>
</section>
我不想重复任何事情,但我已经制作了一个演示来展示正在发生的事情。
只需运行该程序,编辑您想要的内容,然后单击“输出格式化内容”语句即可接收一条警报消息,其中包含 contenteditable 元素中实际 html 格式内容的输出。 至于添加格式等,您需要制作在突出显示的内容上调用文本修改功能的按钮。 是的,那部分会很有趣。
尽管如此,我希望这会有所帮助。
Textarea 已经是输入字段,不接受 html 标签。要传递 html,只需使用 contenteditable div 并使其看起来像带有 CSS 的输入字段。然后你可以将 div 的 innerHTML 值传递到你的表单。
<style>
.contenteditable {
display: block;
width: 100%;
height: 200px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #cccccc;
overflow:auto;
-webkit-transition: border 500ms ease-out;
-moz-transition: border 500ms ease-out;
-o-transition: border 500ms ease-out;
}
.contenteditable:focus {
outline: none;
box-shadow: 0 0 5px #529cdc80;
border: 1px solid #529cdc;
}
</style>
<div class='contenteditablestyle' contenteditable='true'><b>Bold</b> Test</div