可换行的单行文本输入
我正在为我的一个项目编写一个基于浏览器的文本编辑器。每个文本都有一个标题，用户可以对其进行编辑。用户不应该能够格式化该标题或向其添加任何 html，它应该只是一个纯字符串。
一个<input type="text">元素是理想的，但由于标题可能很长，我需要换行，据我所知，这是输入标签无法做到的。
我可以使用<textarea>，但这将允许用户手动添加换行符，这是我不想要的。
我可以使用<p contenteditable="true">，但这会添加不需要的标记，并且用户将能够插入手动换行符和其他标记。
我可以编写一大堆 JavaScript 来验证和限制<textarea>orcontenteditable标记，但这似乎很容易出错并且可能会引入跨浏览器的不一致。还是我让这种方式过于复杂，并且有一种简单的方法可以防止误用？
我相信人们以前已经解决了这个问题。我在这里想念什么？我真的需要一个非常复杂的 JavaScript 解决方案来获得可换行的单行文本输入吗？
顺便说一句，我使用tiptap作为我的编辑器组件。我知道它可以进行标题输入，但到目前为止我还没有弄清楚如何提取该标题。我希望它与文本分开存储，而不是作为文本的一部分。如果有人对使用tiptap 解决我的问题有意见，那也可以作为答案——尽管我认为使用成熟的富文本编辑器来制作简单的、未格式化的单行代码有点过头了。我更喜欢更轻量级的解决方案。
慕森卡浏览 91回答 1
1回答
-
守着一只汪
这里有两个简单的解决方案：在客户端禁用 Enter 键document.querySelector('#textInput').addEventListener('keydown', function(event) { var keyCode = event.keyCode || event.which; // If ENTER key if (keyCode === 13) { event.preventDefault(); // do nothing } });<html><body> <textarea id="textInput" rows=3></textarea></body></html>删除服务器端的换行符let text = inputText.replace(/\n/, '');或者用空格替换它们，然后用一个替换双空格let text = inputText.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');使用这两种解决方案比只使用一种解决方案要好。
随时随地看视频慕课网APP
相关分类
JavaScript