微软边缘浏览器中的材料 UI 可见性密码出现问题检查了不同的方法

Posted 2023-02-19

【中文标题】微软边缘浏览器中的材料 UI 可见性密码出现问题检查了不同的方法

【英文标题】：Having an issue from material UI visibility password in the microsoft edge browser checked the different ways

【发布时间】：2021-11-15 16:05:52

【问题描述】：

在 microsoft edge 浏览器中遇到材料 UI 可见性密码问题，检查了不同的方法。

并遵循此

https://codesandbox.io/s/inputadornments-material-demo-forked-4euh8?file=/demo.js:549-559

还有输入装饰的材质ui文档 https://mui.com/components/text-fields/#InputAdornments.js

基本上，我们只需要一个可见性作为默认材料 UI 提供的，但在 microsoft edge 浏览器中，我们收到了 2 个可见性 eye-Icon 试图采用不同的方法。

我已附上代码参考

  <FormControl sx= m: 1, width: "25ch"  variant="outlined">
      <InputLabel htmlFor="outlined-adornment-password">
        Password
      </InputLabel>
      <OutlinedInput
        id="outlined-adornment-password"
        type=values.showPassword ? "text" : "password"
        value=values.password
        onChange=handleChange("password")
        endAdornment=
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick=handleClickShowPassword
              onMouseDown=handleMouseDownPassword
              edge="end"
            >
              values.showPassword ? <VisibilityOff /> : <Visibility />
            </IconButton>
          </InputAdornment>
        
        label="Passwords"
      />
    </FormControl>

【问题讨论】：

其他两个“密码”字段是否有同样的问题？它也是一个完全不同的图标。您确定不是添加它的“本机”浏览器吗？您目前正在使用哪个版本的 Edge 进行测试？

Edge 的哪个版本？较新的边缘是 Chromium

@DrewReese 我正在使用 Edge 版本 93.0.961.52（官方构建）（64 位），它是最新的，您也可以在 Edge 浏览器中从您的一侧进行测试，它即将到来

【参考方案1】：

如果我们尝试查看example的文件结构，您会在Public文件夹下找到index.html文件。

打开 index.html 文件并在 style 标记中添加以下代码。

<style>
      input::-ms-reveal,
      input::-ms-clear 
        display: none;
      
</style>

保存文件并在 MS Edge 浏览器中运行示例。

在 MS Edge（版本 93.0.961.52）浏览器中输出。

您可能会注意到它没有像您在问题中所说的那样显示 2 个眼睛图标。

您可以在实际代码中执行相同操作，以避免 MS Edge 浏览器出现上述问题。

您还可以将上述 CSS 代码放在本示例的 CSS 文件中。根据您的要求，您可以对其进行修改。

【讨论】：

你可以为这段代码添加内联样式吗：codesandbox.io/s/inputadornments-material-demo-forked-cbszk

在我的建议中，我们使用的是伪元素。根据我的搜索结果，我们似乎无法将样式应用于 javascript 中的伪元素。 See here。在这种情况下，您可以将该 CSS 代码保留在 Style 标记中。