MCUT分享王

標題: 它檢查修改的元素 [打印本頁]

作者: abu478566790413 時間: 2024-3-30 14:15
標題: 它檢查修改的元素
顧名思義，true如果傳遞給它的文字包含任何我們禁止的單詞，則該函數就會返回。我們將這兩個值都小寫，以確保比較不區分大小寫。此updateUI函數決定聊天框中是否存在任何禁用詞。如果是，它會停用傳送按鈕並將 CSS 類別 ( forbidden-div) 新增至聊天框的父親 div。我們將在下一步中利用這一點向用戶提供視覺提示。該腳本最終註冊了兩個事件監聽器：

第一個設定為在keyup事件上觸發。是否是我 Whatsapp 數據庫們的目標（聊天視窗），然後呼叫updateUI函數。由於我們的debounce功能，這不會連續運行，而是僅在鍵入時短暫暫停後運行。

第二個事件偵聽器正在偵聽keydown目標上的事件。具體來說，它正在監視Enter按鍵，如果在文字區域中存在禁用字詞時按下該按鍵，將阻止瀏覽器的預設操作（在本例中為表單提交）。

透過停用發送按鈕以及攔截和停止按鍵，這可以有效地阻止發送包含禁止單字的訊息Enter。您也會注意到，我們正在使用事件委託，透過將我們的事件偵聽器錨定到更廣泛的 DOM 並選擇性地針對特定元素，我們可以規避這個問題。
第四步：添加一些樣式

雖然我們的擴充功能的核心功能是阻止某些提交，但使用者必須立即了解其操作被阻止的原因，這一點很重要。讓我們添加一些樣式來提供視覺提示並增強用戶體驗。這是我們正在使用的規則。將其添加到styles.css文件中：

歡迎光臨 MCUT分享王 (http://allenyen.7788.tw/)