Ondrag ROT-13 / ROT-47解码

时间:2011-04-18 17:26:46

标签: javascript html css text transform

我有一个小网站,我想混淆一些文本,以保护用户不小心不时地读取它。

就像imdb上的关键字一样,你必须翻转以显示它们。

我认为如果标记了文本,那将是一种很好的互动方式来揭示文本。

示例:

  

程序员如何表达   h(是)|(呃)爱? Zl srryvatf sbe lbh   ner uneqpbqrq。

现在你要标记混淆文本,就像你准备将它复制到剪贴板一样,它应该显示出来。

有办法做到这一点吗?我当前的问题是一种在javascript中确定当前选择的方法。

2 个答案:

答案 0 :(得分:1)

jCarat (jQuery Caret Plugin)应该满足您的需求。

答案 1 :(得分:1)

我只能用一种棘手的方式来考虑CSS:

使用与背景颜色相同的颜色文字!然后,当用户突出显示时,将显示文本。您需要勾画或引起对他们需要突出显示的部分的注意力。

另一种方式:

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

还有很多其他方法可以做到这一点(例如隐藏/显示div),但这些是我认为最接近/最简单的方式,符合您选择文本以触发扰流板的要求。

编辑:使用背景颜色解决方案,您不希望对文本进行编码,只需将其设为“隐身”,直到突出显示。它实际上是一个非常俗气的解决方案,还有很多其他的更好,但好的部分是它只是css。老实说,我认为强制一个完整的亮点将是你的用户的痛苦,只需将rot13值存储在一个地方,真实值存储在另一个地方(隐藏的跨度可能),并使用js在点击或其他东西上交换它们。无需单独处理解码。您可以单独使用CSS和一些智能:hover:focus选择器来完成此操作。

EDIT2 :出于某种原因,我没有想到你可以单独使用javascript进行rot13解码,我来自php世界,所以现在我感觉非常愚蠢。对不起,我没有更好地回答你的问题,但希望其中一些有用。 GL!