整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端如何實現textarea里的不同文本顯示不同顏色

          求場景

          前端有時候需要展示日志,用textarea,也可以用div。 用div設置可編輯屬性確實可以做到,但是這表現的并不完全像textarea,總之,不想用div替代。如果用 textarea,需要根據里面的文本內容不同,去展示不同的顏色!不過瀏覽器兼容性沒那么好。

          如果是控制textarea的style,則所有文本都是一個顏色;如果把文本放到標簽里面,也不會起作用,因為標簽在文本域組件里面不會去解釋,直接當做文本處理了。

          解決方案

          如果這個需要在同一個文本域里面顯示不同顏色的的字體,比如warn 告警是黃色,error錯誤顯示為紅色。

          大概思路有兩種 ,有一種類似谷歌翻譯那種,在上面再覆蓋一層DIV

          現在我要介紹的是一種較為簡單的土方法。

          先是引入高亮的腳本

          <script src="dist/jquery/jquery.min.js"></script>
          <script src="dist/jquery-ui/jquery-ui.min.js"></script>
          <script src="dist/jquery-highlighttextarea/jquery.highlighttextarea.js"></script>

          引入樣式

          <link rel="stylesheet" href="dist/jquery-ui/theme/jquery-ui.min.css">
          <link rel="stylesheet" href="dist/jquery-highlighttextarea/jquery.highlighttextarea.min.css">


          只需highlightTextarea在jQuery對象上調用。

          $(/* selector */).highlightTextarea({
            /* options */
          });

          例如:

          <textarea cols="50" rows="5">...</textarea>
          
          <script>
            $('textarea').highlightTextarea({
              words: ['Lorem ipsum', 'vulputate']
            });
          </script>

          還有一條

          <!DOCTYPE html>

          <html>

          <head>

          <title></title>

          </head>

          <body>

          <div>

          <style type="text/css">

          .in, .out {

          padding: 0;

          margin: 0;

          position: absolute;

          border: 1px solid #ccc;

          width: 350px;

          height: 100px;

          left: 10px;

          top: 10px;

          font-size: 14px;

          z-index: 3;

          }

          .in {

          outline: none;

          z-index: 2;

          color: black !important;

          text-shadow: 0px 0px 0px #fff;

          -webkit-text-fill-color: transparent;

          }

          .out {

          background-color: transparent;:

          }

          </style>

          <textarea class="in" id='inaa' oninput='inputFunc()' style="width: 350px; height: 100px;"></textarea>

          <div id='put' class="out" onclick='inaa.focus()'>

          </div>

          <script type="text/javascript">

          function inputFunc (value) {

          // console.log(value)

          console.log(inaa.value)

          let spans = document.createElement('span')

          spans.innerHTML = '哈哈'

          spans.style.color = 'red'

          put.innerHTML = inaa.value.replace(/哈哈/g, '<span style="color: red;">哈哈</span>')

          }

          </script>

          </div>

          </body>

          </html>

          輯導語:如今越來越多的APP開始更新了深色模式,那么如何做好富文本在深色模式的適配呢?本篇文章主要總結了富文本的字體顏色在深色模式如何進行優化,希望對您有幫助。

          自從19年蘋果發布會推出了深色模式后,越來越多的APP開始更新了深色模式,那么如何才能更好的適配深色模式呢?本文主要是總結一下富文本的字體顏色在深色模式上如何做優化。

          富文本編輯器(Rich Text Editor,RTE)是一種可內嵌于瀏覽器,所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能,方便那些不太懂HTML用戶使用。用戶是可以自己去設置文本的顏色、樣式、格式等。那么如果用戶在淺色模式下寫出了黑色的字,在深色模式應該怎么做適配呢?

          顏色構成

          首先來簡單了解一下顏色的構成方式,目前實際工作中比較常見的的幾種色彩模式有如下幾種:CMYK、RGB、HSB、HSL。

          1.CMYK

          主要應用于平面印刷。

          2.RGB 色彩模式

          是工業界的一種顏色標準,是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。

          3.HSB 又稱 HSV

          表示一種顏色模式:在 HSB 模式中,H(hues)表示色相,S(saturation)表示飽和度,B(brightness)表示亮度 HSB 模式對應的媒介是人眼。

          4.HSL

          是一種將 RGB 色彩模型中的點在圓柱坐標系中的表示法。H(hues)表示色相,S(saturation)表示飽和度,L(Lightness)表示亮度 。但 L(Lightness:亮度)與 B(Brightness:明度)分別被認為是「顏色中白色的量」和「顏色中光線的量」。

          HSB 和 HSL在相同參數下,顏色差異還是挺大的。在設計上一般使用HSB模式,開發人員一般使用HSL,所以對于后面的分析,我們都采用HSL。

          案例分析

          主要是找了一些文檔類垂直領域產品做一些相關的分析。

          1.有道云筆記

          對于富文本的顏色并沒有做處理,在深色模式下,黑色字體顏色幾乎看不出來。

          2.石墨文檔

          對于顏色做了反白處理,黑色文字在深色模式下變成白色,黃色在深色模式下也變成了暗黃色。

          圖中淺色背景下的文字顏色是通過代碼查看,深色背景下的文字顏色是通過截圖吸取,所以存在微小誤差,但是可以大概看出:石墨文檔的顏色轉換規則:對于H=0的顏色(也就是灰度色)在深色模式下的轉換規則是:H不變,S=淺色S/2,L=80-淺色L。但對于H有數值的顏色在深色模式的轉換規則是:H不變,S=淺色S/2,L=100-淺色L。

          可以看出石墨文檔對于富文本的處理做的很全面,不是簡單的進行顏色的反色,而是對于飽和度和明度都做了相應的處理,在深色模式下,顏色會偏暗一些,以減少眼睛疲勞。

          3.飛書文檔

          只能選擇系統自帶的顏色庫,從其他頁面粘貼復制進來也會清除樣式,所以開發可以對顏色庫的顏色做特殊處理。

          4.釘釘文檔

          使用了很偷懶的方法,里沒有對富文本做處理。

          5.騰訊文檔竟然沒有深色模式


          主站蜘蛛池模板: 蜜桃视频一区二区三区在线观看 | 日韩一区二区三区在线| 中文字幕一区二区三区四区| 精品无码一区二区三区电影| 免费精品一区二区三区在线观看 | 国产一区二区在线|播放| 国产一区二区内射最近更新| 韩国精品一区视频在线播放| 人妻体内射精一区二区三四| 熟妇人妻一区二区三区四区| 欧美日韩精品一区二区在线观看| 日韩电影一区二区三区| 一区二区三区四区在线视频| 99久久精品日本一区二区免费 | 多人伦精品一区二区三区视频| 精品一区二区三区自拍图片区| 中文字幕日韩人妻不卡一区| 乱中年女人伦av一区二区| 91精品一区二区三区在线观看| 精品少妇一区二区三区视频| 果冻传媒一区二区天美传媒| 无码人妻一区二区三区免费视频 | 国产一区二区三区影院| 午夜福利一区二区三区在线观看 | 免费一区二区三区| 99精品高清视频一区二区| 国产a久久精品一区二区三区| 精品国产一区在线观看 | 国产成人久久精品一区二区三区| 成人一区二区免费视频| 国产韩国精品一区二区三区| 夜夜爽一区二区三区精品| 午夜无码一区二区三区在线观看| 老湿机一区午夜精品免费福利| 福利一区在线视频| 麻豆精品一区二区综合av| 亚州国产AV一区二区三区伊在| 亚洲午夜日韩高清一区| 农村人乱弄一区二区| 中文字幕一区二区人妻性色| 无码一区二区三区免费|