Make HTML content not react on search (Ctrl+F)

后端 未结 7 2180
春和景丽
春和景丽 2021-01-01 07:12

In my web app I have a layer with a static HTML content that displays a text.

When I do a search on a page (ctrl+F) and type some text that is contained in the layer

7条回答
  •  星月不相逢
    2021-01-01 07:58

    It's tricky but you could write the text of your layer as the CSS content property of a layer pseudoelement. In this way the search functionality is not able to detect the text, and the text itself can't be highlighted.

    e.g.

    Html

    Css

    #layer:before {
       content: attr(data-text); 
    }
    

    Also the image solution is fine but this would require an extra request and the text couldn't be zoomable everywhere using default browser functionality. Other solution requiring Flash (or also Silverlight or Java Applets) should be avoided, especially due to the lackness of the player plugin for some platforms.

    Example fiddle (with CSS attr()) : http://jsfiddle.net/EbTNd/

提交回复
热议问题