對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
注：以下輸入框包含input、textarea。
事情是這樣的，上個星期，接到了一個需求，要求去除掉項目中的輸入框的自動拼寫檢查功能，也就是下圖出現的紅線，這個檢查是瀏覽器自帶的。
其實是有解決方法的，而且也不難，很簡單，只需要在輸入框標簽上加上一個屬性spellcheck=false即可，也就是：
但是問題來了，我需要給全局的輸入框標簽都加上才行，由于本項目是使用了antd-design這個組件庫，那我們來看看整個項目都有哪些組件包含了輸入框標簽呢？
ant-design官方提供了一個組件，可以用來為全局的組件進行統一配置，這個組件可以傳入一個input的參數，即可配置全局的Input標簽
也就是：
由于這個配置只針對全局的Input，所以結果都有哪些組件成功去掉了拼寫校驗功能呢：
大概的思路就是，修改ant-design的源碼中的input這一部分，給Input、Textarea這些組件加上一個defaultProps，這個defaultProps長這樣：
所以具體實現為以下代碼：
結果就是，全局的Input、Textarea都去除了拼接檢查了，但是Select、InputNumber卻沒有去除，因為他們是依賴了RCSelect、RCInputNumber這兩個另外的組件，所以想改這兩個，就得去改他們兩依賴的組件，所以結果就是：
我們都知道在React中，只要涉及到JSX語法，最終在解析時都會通過React.createElement方法來創建標簽：
所以思路就是在最終調用React.createElement時，判斷如果是input、textarea這兩個類型的話，就給標簽加上spellCheck: false這個屬性，具體代碼為：
這樣做的結果是：
但是總是覺得直接涉及到React自帶方法的修改，有點不太好。。
思路就是全局監聽input這個事件，并在這個事件里去給觸發事件的DOM節點增加spellCheck: false，具體代碼為：
這樣做的結果是：
兼容性比較差，所以不考慮了吧~~~
哎。。。都怪沒有好好看文檔。。。其實前面做的都是無用功，最方便的做法是直接在 body 上加 spellcheck="false" 就行了，底下的后代元素會自動繼承這個屬性值。。
本文鏈接：http://www.www897cc.com/showinfo-26-93094-0.html為了關閉全局 Input 的自動拼寫校驗！走了好多彎路
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 多線程編程在 C# 中的基礎概念與實現
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號