国产一级片在线观看_女人18毛片a级毛片视频_老色鬼在线精品视频网站_日韩精品欧美大片资源在线观看网站_亚洲精品无码怕怕_亚州欧美综合另类_国产A级强奸黄片_成年中文字幕在线观看_这里只有精品久久_欧美人妻aⅴ中文字幕

在網(wǎng)站開發(fā)中，文本輸入和編輯如何在網(wǎng)絡(luò)上工作？雖然這個(gè)過程看起來很簡單，但在其看似簡單的背后有很多技術(shù)上的細(xì)微差別。今天深圳尼高網(wǎng)站設(shè)計(jì)公司就和大家分享下如何為網(wǎng)站開發(fā)文本編輯器。

文本小部件是一個(gè)文本輸入字段，用戶可以在其中使用編輯器中的一系列控件設(shè)置文本樣式。每個(gè)控件都將 CSS 屬性應(yīng)用于文本。從用戶的角度來看，它看起來像是一個(gè)用于輸入文本的普通字段，但其看似簡單的背后卻隱藏著大量復(fù)雜的流程。有幾種方法可以在 Web 上實(shí)現(xiàn)文本輸入字段。我們可以使用簡單的文本字段，或多行textarea元素，或contenteditable使輸入可編輯的屬性，或document.designMode = on. 它們有何不同？

如果您需要一次編輯整個(gè)頁面，您可以使用document.designMode. 此模式允許編輯給定文檔中的任何元素，甚至是iframe.我們選擇了contenteditable包含所有必要的文本編輯功能的屬性。使用此屬性，頁面上的任何文本都可以編輯，如果我們想讓人們使用 CSS 設(shè)置文本樣式，這一點(diǎn)非常重要。例如，用戶可以直接設(shè)置選定部分或整個(gè)文本的樣。

通過提供對 CSS 開箱即用的所有選項(xiàng)的訪問，我們使用戶能夠以他們希望的任何方式設(shè)置文本樣式。除了眾所周知的屬性（例如字體、樣式、顏色和裝飾）之外，我們還為用戶提供了使用OpenType 字體功能的機(jī)會，例如連字、樣式集、分?jǐn)?shù)等。這些功能通過font-feature-settingsCSS 屬性起作用，允許用戶自定義文本樣式。

除了注冊值（wght、wdth、slnt等），字體制作者還可以創(chuàng)建自己獨(dú)特的字體特征（如上例所示）。為了讓我們的用戶有機(jī)會使用所有可能的字體功能，我們首先需要此信息。

您要使用的所有功能都應(yīng)在字體文件中定義。讓我們看看它的規(guī)格。每種字體都可以以表格的形式表示，提供渲染其字符時(shí)使用的所有不同信息。

我們使用兩個(gè)表來收集有關(guān)字體的信息：

字形替換表字形替換表

( GSUB) 包含一個(gè)字形渲染數(shù)據(jù)列表。該對象是字體特征及其屬性的枚舉。您可以在 GitHub 上查看表格中的數(shù)據(jù)示例。在此表中，該字段是最有趣的。這是字體功能的名稱，表示此字體可使用此功能。我們可以安全地在物業(yè)中使用。GSUB.featureListtagtagfont-feature-settings

字體變化表

字體變化表(fvar) 是與字體關(guān)聯(lián)的變量屬性的表示。GitHub 上也提供了該表的示例。每個(gè)對象都是一個(gè)字體屬性，帶有對可能值（min、、max默認(rèn)值）和本地化名稱（如果有）的描述。我們將這些值與font-variation-settings屬性一起使用。

借助這兩個(gè)表，我們可以滿足所有需求：使用可變字體屬性和各種字體特征。結(jié)果數(shù)據(jù)顯示在編輯器的文本小部件控件中，用戶可以在其中設(shè)置文本樣式而無需使用任何代碼。

文本輸入是文本小部件用戶體驗(yàn)的最重要方面之一。除了啟用處理文本的快捷方式外，我們還必須應(yīng)對一些不尋常的挑戰(zhàn)。使用箭頭鍵導(dǎo)航文本絕對是其中之一。

文本選擇可幫助用戶查看當(dāng)前正在編輯的文本。讓我們嘗試一個(gè)簡單的例子：一個(gè)帶有按鈕的輸入字段來控制文本的粗細(xì)。在這個(gè)例子中，我們可以選擇一段文本并按下Bold按鈕，然后文本中的選擇將保留。但是如果我們的例子更復(fù)雜怎么辦？假設(shè)我們向文本大小選擇器添加了一個(gè)輸入字段。在這種情況下，焦點(diǎn)將轉(zhuǎn)移到新的輸入。

解決此問題有兩種選擇：

在每個(gè)輸入事件之后，我們強(qiáng)制焦點(diǎn)移回文本塊。在這種情況下，選擇會在一定數(shù)量的輸入事件后開始閃爍——我們不希望這樣。我們可以將文本塊添加到iframe. 您可能知道， aniframe有自己的全局window對象。因此，只要選擇在 范圍內(nèi)iframe，即使焦點(diǎn)在外部移動，它也會持續(xù)存在。

我們最終得到了一個(gè)iframe-wrapped 文本小部件。因此，只要選擇在 范圍內(nèi)iframe，即使焦點(diǎn)在外部移動，它也會持續(xù)存在。看看下面的截圖。我們在頁面上有兩個(gè)選擇：文本小部件中的選定片段和控件中文本大小的選定值。