整合營銷服務商

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

          免費咨詢熱線:

          將富文本html內容轉換為純文本,并限制展示字數長度

          、將富文本html內容轉換為純文本

          formatrichtext = (richtext, len = 0) => {
              let content = richtext.replace(/<.+?>/g, '');    
              content = content.replace(/ /ig, ''); /* 去除  */    
              content = content.replace(/\s/ig, ''); /* 去除空格 */
              return content;
          }

          2、限制展示的文本長度

          謂多行文本輸入控件,就是網頁表單中,因輸入內容較多需換行顯示的文本輸入控件,一般為textarea元素。很多富文本輸入框也是對textarea進行包裝。

          <textarea name="Content" rows="8" style="width: 380px"></textarea>

          多選文本輸入框


          自動填寫多行文本輸入控件的五種方法
          1、通過修改元素屬性填表
          textarea元素比較特殊,在html中直接指定value屬性值是無效的。修改textarea元素的text屬性,可以實現自動填表,但要求textarea元素未被腳本賦值的情況下text才有效。修改text屬性不會觸發元素綁定的事件,但在木頭瀏覽器填寫項目中,可以明確指定填表前和填表后需要觸發的事件。

          修改元素屬性


          2、由系統向瀏覽器發送數據
          在window系統下,這幾乎是一個萬能的方法,支持中文輸入,獲得控件元素后,填寫屬性設置為KeyboardSend。在自動輸入前,瀏覽器會自我激活為當前活動窗口,同時把輸入焦點轉移到設定的多行文本控件上。在輸入過程中,不能手工干預,不能讓控件失去焦點,也不能切換到別的程序窗口。輸入遠程會觸發控件綁定的事件代碼。

          系統向瀏覽器發送內容


          3、模擬人工鍵盤操作
          獲取元素后,把填寫屬性設置為Keyboard,能達到人工按下實體鍵盤一樣的效果,因此不能輸入中文,執行時同樣會自動激活瀏覽器窗體,輸入焦點轉移到多選文本控件上。輸入過程中會觸發元素綁定的相關事件。

          模擬人工按鍵


          4、模擬鍵盤事件
          在不按下鍵盤的情況下,直接產生按鍵事件作用于當前活動窗口,獲取元素后設置填寫屬性為KeyboardEvent。與模擬人工操作效果一樣,自動激活瀏覽器窗體,定位輸入焦點到多行文本控件上才能完成輸入,亦不支持中文輸入,會觸發元素控件綁定的腳本事件。

          發送鍵盤事件


          5、執行腳本代碼控制輸入
          在項目管理窗口中,創建一個腳本代碼的步驟,執行JavaScript代碼修改textarea的value屬性值。注意:textarea雖然在html中沒有value屬性,但在JavaScript代碼中是支持的。不管textarea是否被賦初值,都不影響腳本執行填表效果。

          document.getElementsByTagName("textarea")[0].value="木頭軟件";

          也可以使用JQuery代碼,只要勾選【引入JQuery】,瀏覽器自動引用JQuery庫
          $("textarea").eq(0).val("木頭軟件");

          腳本填表多行文本框


          執行以上腳本輸入內容后,不會觸發控件綁定的事件,如有必要,可以在代碼中主動調用相關的事件處理代碼。也可以再添加一個填表步驟項目來主動觸發事件代碼執行。

          輯導語:如今越來越多的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.騰訊文檔竟然沒有深色模式


          主站蜘蛛池模板: 人妻无码视频一区二区三区 | 无码精品久久一区二区三区| 日本精品一区二区三区在线视频| 福利一区二区三区视频在线观看| 日韩精品人妻av一区二区三区| 亚洲一区免费在线观看| 岛国无码av不卡一区二区| 国产亚洲综合一区二区三区| 国产91精品一区二区麻豆网站 | 人妻久久久一区二区三区| 黑人大战亚洲人精品一区| 无码AV一区二区三区无码| 国产一区二区三区国产精品| 四虎在线观看一区二区 | 伦理一区二区三区| 国产精品毛片一区二区| 日韩在线一区二区三区免费视频| 濑亚美莉在线视频一区| 成人一区专区在线观看 | 人妻少妇AV无码一区二区| 久久国产午夜精品一区二区三区| 日本中文一区二区三区亚洲| 精品一区二区三区视频| 亚洲日本中文字幕一区二区三区| 一区二区三区四区在线观看视频| 亚洲乱码国产一区网址| 国产成人无码一区二区在线观看 | 久久久久人妻一区精品性色av| 无码精品黑人一区二区三区| 亚洲国产精品一区| 日韩一区二区三区射精| 日本一道一区二区免费看| 亚洲日本中文字幕一区二区三区| 一区二区在线视频观看| 久久99热狠狠色精品一区 | 一区三区三区不卡| 国产区精品一区二区不卡中文| 日韩内射美女人妻一区二区三区 | 国产日韩精品一区二区三区| 天码av无码一区二区三区四区| 中文字幕一区二区三区在线播放|