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

参考文档:


欢迎访问:天问博客

相关推荐
一张假钞2 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行3 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758104 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周7 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队25 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js