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

参考文档:


欢迎访问:天问博客

相关推荐
钢门狂鸭15 分钟前
关于rust的crates.io
开发语言·后端·rust
编码浪子17 分钟前
趣味学RUST基础篇(异步)
服务器·rust·负载均衡
雾恋3 小时前
最近一年的感悟
前端·javascript·程序员
A黄俊辉A4 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理4 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人4 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥305 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
勇敢牛牛_5 小时前
使用Rust实现服务配置/注册中心
开发语言·后端·rust·注册中心·配置中心
慢半拍iii6 小时前
JAVA Web —— A / 网页开发基础
前端
gnip6 小时前
pnpm 的 monorepo架构多包管理
前端·javascript