我正在为我的一个项目编写一个基于浏览器的文本编辑器。每个文本都有一个标题，用户可以对其进行编辑。用户不应该能够格式化该标题或向其添加任何 html，它应该只是一个纯字符串。一个<input type="text">元素是理想的，但由于标题可能很长，我需要换行，据我所知，这是输入标签无法做到的。我可以使用<textarea>，但这将允许用户手动添加换行符，这是我不想要的。我可以使用<p contenteditable="true">，但这会添加不需要的标记，并且用户将能够插入手动换行符和其他标记。我可以编写一大堆 JavaScript 来验证和限制<textarea>orcontenteditable标记，但这似乎很容易出错并且可能会引入跨浏览器的不一致。还是我让这种方式过于复杂，并且有一种简单的方法可以防止误用？我相信人们以前已经解决了这个问题。我在这里想念什么？我真的需要一个非常复杂的 JavaScript 解决方案来获得可换行的单行文本输入吗？顺便说一句，我使用tiptap作为我的编辑器组件。我知道它可以进行标题输入，但到目前为止我还没有弄清楚如何提取该标题。我希望它与文本分开存储，而不是作为文本的一部分。如果有人对使用tiptap 解决我的问题有意见，那也可以作为答案——尽管我认为使用成熟的富文本编辑器来制作简单的、未格式化的单行代码有点过头了。我更喜欢更轻量级的解决方案。
1 回答
守着一只汪
TA贡献1872条经验 获得超3个赞
这里有两个简单的解决方案：
在客户端禁用 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, ' ');
使用这两种解决方案比只使用一种解决方案要好。
添加回答
举报
0/150
提交
取消