Tauri 应用 input 输入自动大写问题定位解决

使用 Tauri + React 开发 MinApi (http api接口测试工具) 时,在 Mac 系统中遇到一个很奇怪的问题:在 input 输入框中输入内容时,如果输入的是全小写英文字母,会自动将首字母转换为大写,效果如下图所示。

问题定位

经过排查,得知 Tauri 在 Mac 系统中默认使用 Safari 的内核 WKWebView 作为渲染引擎,而 Safari 浏览器的一些 "人性化" 机制:如果输入框中输入的是全小写英文,会自动将首字母转换为大写。

因此,我只需要禁止这个默认的行为,即可解决这个问题。

解决方案

在 Antd Input 组件中添加 autoCapitalizespellCheckautoCompleteautoCorrect 等属性就能完美解决首字母自动转大写的问题。

jsx 复制代码
const disabledAutoCapitalize = {
  spellCheck: false,
  autoComplete: 'off',
  autoCorrect: 'off',
  autoCapitalize: 'off',
}

const Com = () => {
  
  return (
    <div className="box">
	    <Input {...disabledAutoCapitalize} />
      {/*  other code*/}
    </div>
  )
}

export default Com

参考文档:


欢迎访问:天问博客

相关推荐
鹏多多1 分钟前
详解vue渲染函数render的使用
前端·javascript·vue.js
定栓6 分钟前
Typescript入门-JSDoc注释及tsconfig讲解
前端·javascript·typescript
AJi7 分钟前
EGL使用记录
前端·opengl
法欧特斯卡雷特11 分钟前
Kotlin 2.2.20 现已发布!下个版本的特性抢先看!
android·前端·后端
小意恩14 分钟前
el-table表头做过滤
前端·javascript·vue.js
小桥风满袖16 分钟前
极简三分钟ES6 - 迭代器Iterator
前端·javascript
小菜全16 分钟前
ElementUI 组件概览
前端·vue.js·elementui
JarvanMo26 分钟前
提升生产力:每个 iOS 开发者都应该知道的 10 个 Xcode 技巧
前端
玲小珑43 分钟前
LangChain.js 完全开发手册(七)RAG(检索增强生成)架构设计与实现
前端·langchain·ai编程
前端小巷子1 小时前
原生 JS 打造三级联动
前端·javascript·面试