javascript - Ondrag ROT-13/ROT-47解码

Question

我有一个小网站，我想在其中混淆一些文本，以保护不小心不及时阅读它的用户。

很像 imdb 上的关键词，你必须滚动才能显示它们。

我认为如果文本被标记，这将是一种很好的交互式方式来显示文本。

例子:

How does a programmer express h(is)|(er) love? Zl srryvatf sbe lbh ner uneqpbqrq.

现在，您可以像准备将混淆文本复制到剪贴板一样拖动标记混淆文本，它应该会显示出来。

有没有办法做到这一点？我当前的问题是确定 javascript 中当前选择的方法。

Answer 1

我可以想到一种只使用 CSS 的棘手方法:

使用与背景颜色相同的颜色文本!然后当用户突出显示时，文本就会显示出来。您需要概述或吸引他们注意他们需要突出显示的部分以使其显而易见。

另一种方式:

将 rot13 填充到只读文本输入中，并附加一个 select 事件和一个解码它的 AJAX 调用。仅适用于适合输入的较小的剧透文本。您可以使用 textarea 尝试此操作，但它不接受 readonly 属性(可能无关紧要)。

还有很多其他方法可以做到这一点(例如隐藏/显示 div)，但这些是我认为最接近/最简单的方法，可以满足您选择文本以触发剧透的要求。

编辑:使用背景色解决方案时，您不想对文本进行编码，只是让它在突出显示之前“不可见”。这实际上是一个相当俗气的解决方案，还有许多其他更好的解决方案，但好的部分是它只是 css。老实说，我认为强制完整突出显示对您的用户来说是一种痛苦，只需将 rot13 值存储在一个地方，将真实值存储在另一个地方(可能是隐藏跨度)，然后使用 js 在点击或其他东西时将它们换掉。无需实际单独处理解码。您可以单独使用 CSS 和一些智能的 :hover 或 :focus 选择器来完成此操作。

EDIT2:出于某种原因，我没有想到您可以单独使用 javascript 进行 rot13 解码，我来自 php 世界，所以现在我觉得很愚蠢。抱歉，我没有更好地回答您的问题，但希望其中一些有用。 GL!