Ondrag ROT-13/ROT-47 解码
我有一个小网站，我想在其中混淆一些文本，以保护不小心不合时宜地阅读它的用户的破坏。
就像 IMDB 上的关键词一样，你必须滚动鼠标才能显示它们。
我认为如果标记了文本，这将是一种很好的交互式方式来显示文本。
例子：
程序员如何表达 h（是）|（呃）爱？ Zl sryvatf sbe lbh ner uneqpbqrq。
现在，您将拖动标记混淆的文本，就像准备将其复制到剪贴板一样，它应该会显示出来。
有办法做到这一点吗？我当前的问题是确定 javascript 中当前选择的方法。
I have a little website where I would like to obfuscate some text to protected spoiling of users that accidentally read it untimely.
Much like the keywords on imdb were, where you have to rollover to reveal them.
I thought it would be a nice and interactive way to reveal the text if its marked.
Example:
How does a programmer express
h(is)|(er) love? Zl srryvatf sbe lbh
ner uneqpbqrq.
Now you would drag mark the obfuscated text much like you would get ready to copy it to your clipboard, and it should reveal.
Is there a way to do this? My current problem is a way to determine the current selection in javascript.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我能想到一种仅使用 CSS 的棘手方法：
使用与背景颜色相同的颜色文本！然后，当用户突出显示时，文本就会显示出来。您需要概述或提请注意他们需要突出显示的部分以使其明显。
另一种方法：
将 rot13 填充到只读文本输入中，并附加一个
select事件和一个对其进行解码的 AJAX 调用。仅适用于适合输入的较小的剧透文本。您可以尝试使用文本区域，但它不接受只读属性（也许并不重要）。还有很多其他方法可以做到这一点（例如隐藏/显示 div），但这些是我认为符合您选择文本来触发剧透的要求的最接近/最简单的方法。
编辑：使用背景颜色解决方案，您不需要对文本进行编码，只需使其“不可见”直到突出显示。它实际上是一个非常俗气的解决方案，还有许多其他更好的解决方案，但好的部分是它只是 css。老实说，我认为强制完全突出显示对您的用户来说是一种痛苦，只需将 rot13 值存储在一个地方，将真实值存储在另一个地方（可能是隐藏的范围），然后使用 js 在单击或其他操作时将它们交换出来。不需要实际单独处理解码。您可以单独使用 CSS 和一些智能
:hover或:focus选择器来完成此操作。EDIT2：出于某种原因，我没有想到你可以单独使用 javascript 进行 rot13 解码，我来自 php 世界，所以现在我觉得很愚蠢。抱歉，我没有更好地回答您的问题，但希望其中一些有用。 GL！
There is one tricky way I can think of with only CSS:
Use the same color text as the background color! Then when users highlight, the text is revealed. You would need to outline or draw attention to the part that they need to highlight to make it obvious.
Another way:
Stuff the rot13 into a readonly text input, and attach a
selectevent with an AJAX call that decodes it. Will only work for smaller bits of spoiler text that fit in the input. You could try this with a textarea but it doesn't accept the readonly attribute (maybe doesn't matter).There are many many other ways to do this (hide/show divs for example), but these are the closest/simplest ways I could think that match your requirement of selecting text to trigger the spoiler.
EDIT: With the background color solution, you would not want to encode the text, just make it "invisible" until it's highlighted. It's actually a pretty cheesy solution, and there are many others that are better, but the good part is that it is css only. Honestly I think forcing a complete highlight will be a pain for your users, just store the rot13 value in one place, the real value in another (hidden span maybe), and use js to swap them out on click or something. No need to actually process the decoding separately. You could probably do this with CSS alone and some smart
:hoveror:focusselectors.EDIT2: For some reason it didn't occur to me that you can do rot13 decoding with javascript alone, I'm coming from the php world so now I feel pretty foolish. Sorry I didn't answer your question better, but hopefully some of this is useful. GL!
jCarat（jQuery Caret 插件） 应该可以满足您的需求。
jCarat (jQuery Caret Plugin) should cover your needs.