时间戳

首页 > 解决方案 > 没有富文本的单行浏览器记事本

html - 没有富文本的单行浏览器记事本

问题描述

通过将一行粘贴到 URL 栏中，可以将浏览器变成记事本：

data:text/html,<html contenteditable>

由于搜索功能在大多数浏览器中都很出色（标记所有出现的搜索词），因此这可能比其他简单的编辑器（如默认的 Windows 10 编辑器）更有用。

为了使其在视觉上更具吸引力，您可以添加标题和style属性：

data:text/html,<title>Editor</title><html contenteditable style="background:Black;color:LightGray;font-family:monospace">

但是，将剪贴板中的文本粘贴到记事本中时，文本将作为富文本粘贴，并保持源的颜色和字体。如果富文本颜色与背景颜色匹配，这会使文本不可读。有没有办法让浏览器记事本在粘贴时丢弃富文本格式？

标签： htmlcssbrowsereditornotepad

解决方案

通过不使用<html contenteditable>，而是<textarea>从剪贴板粘贴的任何文本都将丢失富文本属性。已经的默认字体<textarea>是等宽字体。该autofocus属性将自动将光标置于<textarea>. 有了一些style属性，这个版本的单行浏览器记事本看起来同样具有视觉吸引力。

data:text/html,<title>Editor</title><style>body,textarea{background:Black;color:LightGray;width:100%;height:100%;margin:0;border:none;resize:none}</style><textarea autofocus>

推荐阅读