CSS 秘密信息生成器

我知道你们刚刚在心里想： 哇，我希望 Chris 今天发布一些超级书呆子的文章，里面有一些几乎无用的技巧，如果我在公共场合谈论这些技巧，就会证明我很快就要孤独终老了。别担心，我帮你想到了！查看一下 CSS 秘密信息生成器。

使用它（我希望）非常简单。您点击一些字母，然后这些字母在选中文本时秘密显示出来。

有一些有趣的事情值得一提，所以我们将在本文中进行讨论。

主要思想

这里赋能的概念是，您可以在现代浏览器中更改文本选择颜色（和背景颜色）。 WebKit 和 Chrome 使用::selection { }而 Mozilla 使用::-moz-selection { }.

在我们的示例中，我们将一大块文本的每个字母都包装在一个<span>中。然后我们有一个用于标记单个字母的小型 UI 系统。所有这些操作都会在这些 span 上切换特定的类名。未标记的 span 具有白色颜色和背景颜色，这意味着它们在选中时会有效消失。标记的 span 会更改颜色。因此，当整个块突出显示时，秘密标记的字母就会显示出来。

需要说明的是，它实际上没有理由以网格形式布局，只是点击字母更容易一些，而且看起来更像秘密信息。

jQuery

就像我们在这里做的所有花哨的事情一样，它使用了 jQuery。我不会进行代码转储。如果您想查看整个内容，它只有 85 行带完整注释的代码。

我过去做过一些其他的网格点击式操作，我一直想弄清楚（但从未成功）的是一种点击并拖动的方式来切换单元格。我终于想出了一个办法……

我将“mousedown”事件绑定到网格本身。当事件触发时，设置一些数据以指示鼠标当前已按下。相反，在“mouseup”上，设置数据以指示鼠标现在已松开。本身没用，但我们可以将“mouseenter”事件附加到所有单元格。如果鼠标在悬停事件发生时处于“按下”状态，则执行与点击相同的切换操作。目前，这仅适用于打开单元格（而不是批量擦除），但它可能也能够进行调整以实现此目的。

$("#grid")
    // clicking on a cell toggles the selected state in the grid and the demo
    .delegate("span", "click", function() {
        // get the first class only (the position), otherwise would fail when it has that plus "selected"
        attrTest = $(this).attr("class").split(" ")[0];
        $(this).toggleClass("selected");            
        $("#secret-message ." + attrTest).toggleClass("selected");
    })
    // if the mouse is currently pressed, set some data so we can check for that
    .bind("mousedown", function() {
        $(this).data("mouseIsDown", true)
    })
    // when the mouse comes back up, change data to say so
    .bind("mouseup", function() {
        $(this).data("mouseIsDown", false)
    })
    // allows the "drawing by dragging"...
    .delegate("span", "mouseenter", function() {
        // which is only allowed while the mouse is pressed down
        if ($("#grid").data("mouseIsDown")) {
             attrTest = $(this).attr("class");
             $(this).addClass("selected");            
             $("#secret-message ." + attrTest).toggleClass("selected"); 
        }
    });

WebKit 不允许文本选择使用“none”背景？

对于网格，由于点击并拖动功能，我想完全关闭该区域的突出显示（在您尝试“绘制”时，它只会让人感到恼火）。我以标准方式为两个渲染引擎设置了文本选择颜色。Firefox 尊重它，Opera 尊重它，但这两个主要的 WebKit 浏览器都不会尊重它。

#grid-area ::-moz-selection { background: none; } /* Works */
#grid-area ::selection { background: none; } /* Doesn't Work */

这可能是 WebKit 方面某种不良可用性预防措施，但我认为它更像是错误。如果我专门编写 CSS 来消除文本选择的背景颜色，那就是我想要的。