HTML / JAVASCRIPT：在contentEditable = true中禁用HTML内容 [英] HTML / JAVASCRIPT : Disable HTML CONTENT in contentEditable=true
问题描述
textarea ，我不想有能力在div中编辑东西，并且只需纯文本就可以粘贴图片等等。 示例
www.facebook.com
- 最好的示例是 Facebook的新闻饲料。
为什么我需要这种方式？ 如果您查看Facebook的新闻提要，您就会发现您可以在其中撰写信息的区域展开，因为您在撰写信息或点击了很多信息。 这就是为什么我想在contentEditable中使用div的原因，因为在textarea中我无法做到这一点。 请勿仅限JQUERY JAVASCRIPT 非常讨厌，不到10分钟就把它放在一起。希望它至少会给你一个想法。 仅在谷歌Chrome 5.0.308.0上测试 代码解释，因为我在注释失败 任何人都可以确认Lucida Console是textarea的默认字体吗？它是Consola吗？快递新？我认为任何固定宽度的字体都可以工作。我不使用Mac，所以我不知道它与Windows共享的字体，尽管我认为Courier New是更好的选择... What I want? I want a div what works like a Example www.facebook.com
- The best example is facebook's news feed. Why I need this way? If you check out facebook's news feed, you well see that the area where you can write your post, expands as you write your post or hit a lots of enters. This is the same reason why I want to use a div with contentEditable, because in textarea I can't do that.
# PLEASE NO JQUERY only JAVASCRIPT Resizable Textarea using pure JavaScript without frameworks: Very hackish, put it together in less than 10 minutes. Hopefully it'll at least give you an idea. ONLY tested on Google Chrome 5.0.308.0 Explanation of code, since i fail at commenting Can anyone confirm that Lucida Console is the default font of textarea? Is it Consola? Courier New? I assumed any fixed-width font would work. I don't use Mac, so I dont know what fonts it shared with windows, though i think Courier New is a better choice... 这篇关于HTML / JAVASCRIPT：在contentEditable = true中禁用HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b
＃
< head>
< script>
函数taOnInput（）
{
var dis = this;
setTimeout（
function（）{
var span = document.createElement（div）;
span.innerHTML = escape（dis.value）.replace（/ [％ ] 0A / g，< br />）+< br /> ;.; //额外BR填充... TextArea使用％0A，而不是\ $
span.style .width = dis.offsetWidth +px;
span.style.padding =0px;
span.style.fontFamily =Lucida Console;
document.body.appendChild（span ）; //当不在DOM树中时，偏移高度不起作用我猜= /？或者它是黑客
dis.style.height = span.offsetHeight +px;
document.body.removeChild（ span）;
}，1
）; // setTimeout = hack，因为oKP被称为BEFORE字符附加。
window.onload = function（）
{
var resizableTA = document.getElementById（resizableTA）;
resizableTA.onkeypress = taOnInput;
}
< / script>
< title> ItzWarty - 无标题文档< / title>
< / head>
< body>
< textarea id =resizableTA> Trolololol< / textarea>
< / body>
< / html>
1）在window.onload之前，idresizableTA的textarea已创建并附加到DOM树的document.body。
2）window.onload附加一个事件处理函数，taOnInput [textarea on input]。
3）textarea on input创建一个虚拟跨度，强制它的宽度为textarea的宽度，字体样式设置为Lucida Console，AFAIK是textareas的默认字体，将textarea的值复制到span的innerHTML，同时替换％0A [文本行使用的换行符]和[换行符] ...
4）span的offsetHeight是跨度的高度，现在可以用来强制textarea的高度。
textarea, I don't want to have the ability to edit things in the div, and paste images and so on just plain text.
<html>
<head>
<script>
function taOnInput()
{
var dis = this;
setTimeout(
function(){
var span = document.createElement("div");
span.innerHTML = escape(dis.value).replace(/[%]0A/g, "<br/>")+"<br/>."; //Extra BR for padding... TextArea uses %0A, not \n
span.style.width = dis.offsetWidth+"px";
span.style.padding = "0px";
span.style.fontFamily = "Lucida Console";
document.body.appendChild(span); //Offset height doesnt work when not in DOM tree i guess =/? or is it a hack
dis.style.height = span.offsetHeight+"px";
document.body.removeChild(span);
}, 1
); //setTimeout=hack, since oKP is called BEFORE character append.
}
window.onload = function()
{
var resizableTA = document.getElementById("resizableTA");
resizableTA.onkeypress = taOnInput;
}
</script>
<title>ItzWarty - Untitled Document</title>
</head>
<body>
<textarea id="resizableTA">Trololololol</textarea>
</body>
</html>
1) before window.onload, the textarea of id "resizableTA" has been created and appended to document.body of DOM tree.
2) window.onload attaches an event handler, taOnInput [textarea on input].
3) textarea on input creates a dummy span, forces its width to the width of the textarea and font style to "Lucida Console", which AFAIK is the default font for textareas, copies the value of the textarea to the span's innerHTML, while replacing %0A [newline that textareas use] with
[line break]...
4) span's offsetHeight is the height of the span, which can now be used to force the height of the textarea.
