移动端输入框文字显示为方块？检查 -webkit-text-security 属性

确认输入框类型与属性设置

检查输入框的 HTML 标签类型是否为 text 或 textarea，而非 password。该属性仅对非密码字段生效，密码字段默认显示圆点。在 CSS 中查找是否存在 -webkit-text-security 的声明，其值可以是 circle、disc、square 或 none。

如果代码中设置了 -webkit-text-security: square，输入框内的字符将被替换为方块。这是 WebKit 内核浏览器（如 Safari）特有的视觉效果，用于在不使用密码类型的情况下隐藏输入内容。确认该属性是否为开发者有意添加，或是误写导致的问题。

MDN 文档指出该属性属于非标准特性，不建议在生产环境中使用，因为其支持范围有限且可能被移除。在非 WebKit 内核的浏览器中，该属性可能完全无效，输入框将正常显示文字。如果页面在部分设备上显示正常，而在其他设备上显示为方块，可能是浏览器兼容性导致的。

如果需要在移动端隐藏输入内容，建议优先使用标准的 input type=password 属性。只有在确实需要自定义视觉效果且目标用户设备均为 WebKit 内核时，才考虑使用此非标准属性。检查代码是否针对特定浏览器做了兼容性处理，导致该属性被错误应用。

在浏览器开发者工具中选中输入框元素，查看计算后的样式。确认 -webkit-text-security 的具体值，并尝试将其设置为 none 以测试是否恢复正常显示。如果设置为 none 后文字恢复正常，则确认是此属性导致的问题。

观察输入框的视觉效果，确认方块形状是否符合预期。circle 会显示圆形，disc 显示实心圆，square 显示方形。如果不需要隐藏文字，直接移除该属性或将其设置为 none 即可。确保该属性的使用符合当前的业务需求和用户体验标准。

由于该属性是非标准的，未来浏览器更新可能会移除支持，导致页面显示异常。在移动端开发中，应尽量遵循标准规范。如果目的是为了安全地收集用户信息，使用标准的密码输入框是更稳妥的选择，它能提供更好的兼容性和安全性。

如果必须使用此属性，应确保目标用户群体使用的设备均支持 WebKit 引擎。同时，应做好降级处理，确保在不支持该属性的浏览器中，输入框能够正常显示和输入。评估使用非标准属性带来的维护成本和潜在风险，做出合理的技术决策。