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

参考文档:


欢迎访问:天问博客

相关推荐
君莫笑11111几秒前
从零到一教你在鸿蒙中实现微信分享--全流程
前端·harmonyos
月亮慢慢圆1 分钟前
项目中路由分模块的设计
前端
华洛10 分钟前
从0到1打造企业级AI售前机器人——实战指南二:RAG工程落地之数据处理篇🧐
前端·javascript·vue.js
zhangxingchao11 分钟前
Jetpack Compose 之 附带效应(SideEffect, 副作用)和 Kotlin协程
前端
啊波次得饿佛哥34 分钟前
在winform中使用chromiumWebBrowser显示Echarts图表
前端·javascript·echarts·winform·cefsharp
秋天的一阵风1 小时前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
秋天的一阵风1 小时前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
Coffeeee1 小时前
重新开始学Threejs,了解一下里面的一些高级几何体
前端·typescript·three.js
沉迷...1 小时前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
xx24062 小时前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js