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

参考文档:


欢迎访问:天问博客

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
yezipi耶不耶8 小时前
Rust入门之并发编程基础(三)
rust
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui