是否可以设置输入样式而不是使用文本区域？答案

【问题标题】：Is It Possible to Style Input Rather Than Use Textarea?是否可以设置输入样式而不是使用文本区域？
【发布时间】：2013-08-06 06:14:05
【问题描述】：

我有一些文本最终会进入 PDF 的单行。因为 PDF 区域不会有新行来显示它，所以我想使用输入而不是文本区域。输入本身不允许换行，而 textareas 要求您捕获 keydown 事件并在值更改时执行正则表达式。

有没有一种方法可以设置输入样式以使其显示类似于文本区域？ I've tried to accomplish it with CSS 但结果看起来不太乐观。

【问题讨论】：

简而言之，没有。这就是textarea 存在的原因。在编辑文本区域时，您不必必须在文本区域中捕获击键。提交表单后，您可以简单地去除换行符。
你看过CKEditor吗？它具有“内联”功能，您似乎可以在可编辑的 div (HTML5) 中编写
@ntgCleaner 什么？ CKEditor 是一个所见即所得的 HTML 编辑器。我想要镇纸，而不是铁砧。
@Dropped.on.Caprica 通过将输入文本框用作文本区域，您正在将镇纸变成铁砧。所有的工作都是为你完成的。是的，它是一个大型插件——但它可以工作。 IMO，您要么需要创建一个隐藏的输入框来编辑 div 的“内容”（使其看起来像是在编辑 div），要么使用 CKEditor 或坚持输入
@MikeW 这就是我的想法。我处理这些事件或任何事情都没有问题，我只是想可能有一种方法可以以某种方式设置输入样式。

标签： html css

【解决方案1】：

您可以使用 DIV 并将 contentEditable 设置为 true。试试这个：

<div contenteditable="true" style="width:200px; height:200px; border:solid 1px blue; overflow:auto"></div>

【讨论】：

这需要比 <textarea> 更多的脚本来处理，但似乎 OP 想要避免脚本。
我对使用 JavaScript 或设置事件没有任何问题，我希望有一个简单的 CSS 解决方案。从回复来看，我需要用 JS 来处理。
DIV 是几乎是 HTML/CSS 解决方案。不应该涉及太多额外的脚本
@YuriyGalanter 就属性而言，您是正确的。但检查事件支持。真是一团糟。
@Dropped.on.Caprica 是的 .innerHTML 会给你 HTML 的 <p> 和 <br> 而不是换行符，不知道它是否更好。 .textContent 只会给你文本，但换行符只是删除（文本之间的任何分隔也是如此）。

【解决方案2】：

简而言之，没有。这就是 textarea 存在的原因。在编辑文本区域时，您不必在文本区域中捕获击键。您可以在提交表单后简单地去除换行符。

【讨论】：

【解决方案3】：

如果您不想使用 textarea，唯一的方法是使用包含包装文本的 div，并且每当用户单击它（焦点）时，都会在顶部显示一个允许编辑的输入。尽管如此，这还是很丑陋，因为用户必须在一行中编辑他的文本。

需要 CSS3

word-break: break-all;

【讨论】：